@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;
}
.part{
  width: 100vw;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.part1{
  height: calc(1080 /1920*100vw);
  background: url(../images/part1.jpg) top center no-repeat;
  background-size: 100%;
}
.part2{
  height: calc(727 /1920*100vw);
  background: url(../images/part2.jpg) top center no-repeat;
  background-size: 100%;
}
.part3{
  height: calc(1394 /1920*100vw);
  background: url(../images/part3.jpg) top center no-repeat;
  background-size: 100%;
}
.part4{
  height: calc(1539 /1920*100vw);
  background: url(../images/part4.jpg) top center no-repeat;
  background-size: 100%;
}
.part5{
  height: calc(1167 /1920*100vw);
  background: url(../images/part5.jpg) top center no-repeat;
  background-size: 100%;
}
.part6{
  height: calc(1239 /1920*100vw);
  background: url(../images/part6.jpg) top center no-repeat;
  background-size: 100%;
}
.topbar{
  width: 100%;
  height: calc(75 /1920*100vw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,.5);
}
.login {
  text-align: right;
  font-size: calc(18 /1920*100vw);
  line-height: calc(26 /1920*100vw);
  position: absolute;
  right: calc(260 /1920*100vw);
  top: calc(25 /1920*100vw);
  color: #0ff696;
}
.login a {
  color: #0ff696;
}
.login p span{
  vertical-align: middle;
  padding: 0 calc(2 /1920*100vw);
}
.logo{
  display: block;
  width: calc(178 /1920*100vw);
  height: calc(38 /1920*100vw);
  background: url(../images/logo.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(17 /1920*100vw);
  left: calc(60 /1920*100vw);
  z-index: 10;
}
.language-box{
  width: calc(190 /1920*100vw);
  height: calc(42 /1920*100vw);
  background: url(../images/language_bg.png) top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: calc(16 /1920*100vw);
  right: calc(50 /1920*100vw);
  z-index: 19;
  font-family: Source Han Sans, Noto Sans CJK SC, Noto Sans SC, "Source Han Serif", "Noto Serif CJK SC", "Noto Serif SC", sans-serif;
}
.language-box .select-language{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(190 /1920*100vw);
  height: calc(42 /1920*100vw);
}
.language-box .select-language i{
  display: block;
  width: calc(26 /1920*100vw);
  height: calc(26 /1920*100vw);
  background: url(../images/lang_drop.png) top center no-repeat;
  background-size: 100%;
  margin: 0 calc(5 /1920*100vw);
}
.language-box .select-language span{
  font-size: calc(16 /1920*100vw);
  color: #969a9b;
}
.language-box .language-choose-list{
  width: calc(190 /1920*100vw);
  height: 0;
  overflow: hidden;
  background: rgba(0,0,0,.95);
  position: absolute;
  top: calc(42 /1920*100vw);
  left: 0;
  transition: all .8s;
  box-sizing: border-box; 
}
.language-box .language-choose-list.on{
  height: calc(330 /1920*100vw);
}
.language-box .language-choose-list ul li{
  width: 100%;
  height: calc(30 /1920*100vw);
  text-align: center;
  line-height: calc(30 /1920*100vw);
  font-size: calc(14 /1920*100vw);
  color: #999393;
  cursor: pointer;
  box-sizing: border-box;
  border-bottom: solid 1px #262e2f;
}
.language-box .language-choose-list ul li:last-child{
  border: none;
}
.language-box .language-choose-list ul li.on{
  color: #fff;
}

.slogan{
  display: block;
  width: calc(1482 /1920*100vw);
  height: calc(237 /1920*100vw);
  background: url(../images/slogan_en.png) center center no-repeat;
  background-size: 100%;
  margin: calc(480 /1920*100vw) auto 0; 
}
.lang-en .slogan{
  background: url(../images/slogan_en.png) center center no-repeat;
  background-size: 100%;
}
.lang-ar .slogan{
  background: url(../images/slogan_ar.png) center center no-repeat;
  background-size: 100%;
}
.lang-de .slogan{
  background: url(../images/slogan_de.png) center center no-repeat;
  background-size: 100%;
}
.lang-es .slogan{
  background: url(../images/slogan_es.png) center center no-repeat;
  background-size: 100%;
}
.lang-fr .slogan{
  background: url(../images/slogan_fr.png) center center no-repeat;
  background-size: 100%;
}
.lang-zh-tw .slogan{
  background: url(../images/slogan_tw.png) center center no-repeat;
  background-size: 100%;
}
.lang-tw .slogan{
  background: url(../images/slogan_tw.png) center center no-repeat;
  background-size: 100%;
}
.lang_zh-tw .slogan{
  background: url(../images/slogan_tw.png) center center no-repeat;
  background-size: 100%;
}
.lang-ko .slogan{
  background: url(../images/slogan_ko.png) center center no-repeat;
  background-size: 100%;
}
.lang-ja .slogan{
  background: url(../images/slogan_ja.png) center center no-repeat;
  background-size: 100%;
}
.lang-pt .slogan{
  background: url(../images/slogan_pt.png) center center no-repeat;
  background-size: 100%;
}
.lang-ru .slogan{
  background: url(../images/slogan_ru.png) center center no-repeat;
  background-size: 100%;
}
.lang-ar .slogan{
  background: url(../images/slogan_ar.png) center center no-repeat;
  background-size: 100%;
}
.lang-tr .slogan{
  background: url(../images/slogan_tr.png) center center no-repeat;
  background-size: 100%;
}
.stitle{
  width: calc(1450 /1920*100vw);
  text-align: center;
  font-size: calc(24 /1920*100vw);
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  margin: calc(-20 /1920*100vw) auto 0; 
}
.time{
  width: calc(1450 /1920*100vw);
  text-align: center;
  font-size: calc(24 /1920*100vw);
  color: #f1de9d;
  line-height: calc(30 /1920*100vw);
  margin: calc(10 /1920*100vw) auto 0; 
}
.kv-btn{
  width: 100%;
  height: calc(84 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(55 /1920*100vw);
}
.kv-btn a{
  display: block;
  width: calc(407 /1920*100vw);
  height: calc(84 /1920*100vw);
  text-align: center;
  line-height: calc(84 /1920*100vw);
  font-size: calc(32 /1920*100vw);
  color: #ffe18b;
  margin: 0 calc(24 /1920*100vw);
}
.kv-btn a.btn-join{
  background: url(../images/btn_join.png) top center no-repeat;
  background-size: 100%;
}
.kv-btn a.btn-share{
  background: url(../images/btn_share.png) top center no-repeat;
  background-size: 100%;
}
.btn-record{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(214 /1920*100vw);
  height: calc(214 /1920*100vw);
  background: url(../images/btn_record.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: fixed;
  top: 50%;
  margin-top: calc(-107 /1920*100vw);
  left: calc(15 /1920*100vw);
  z-index: 11;
}
.btn-record p{
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: calc(20 /1920*100vw);
  color: #ecce87;
  line-height: calc(26 /1920*100vw);
  padding: 0 10%;
}
.lang-de .btn-record p{
  font-size: calc(18 /1920*100vw);
}

.topnav{
  width: calc(336 /1920*100vw);
  height: calc(504 /1920*100vw);
  background: url(../images/nav_bg.png) top center no-repeat;
  background-size: 100%;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;
  right: 0;
  box-sizing: border-box;
  padding-top: calc(35 /1920*100vw);
  transition: all .8s;
}
.topnav.close{
  right: calc(-400 /1920*100vw);
}
.topnav .navlist{
  width: calc(315 /1920*100vw);
  overflow: hidden;
  margin: 0 auto;
}
.topnav .navlist li{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(315 /1920*100vw);
  height: calc(65 /1920*100vw);
  overflow: hidden;
  cursor: pointer;
  margin-bottom: calc(12 /1920*100vw);
}
.topnav .navlist li.on{
  background: url(../images/nav_btn.png) top center no-repeat;
  background-size: 100%;
}
.topnav .navlist li p{
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(35 /1920*100vw);
  text-align: center;
  line-height: calc(30 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #ebebeb;
}
.topnav .navlist li.on p{
  color: #ffe18b;
}
.totop{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(283 /1920*100vw);
  height: calc(45 /1920*100vw);
  background: url(../images/totop.png) top center no-repeat;
  background-size: 100%;
  margin: 0 auto;
}
.totop span{
  text-align: center;
  line-height: calc(30 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #ebebeb;
}
.lang-de .totop span{
  font-size: calc(20 /1920*100vw);
}
.close-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc(49 /1920*100vw);
  height: auto;
  background: url(../images/open_nav.png) top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(-43 /1920*100vw);
  padding: calc(30 /1920*100vw) 0;
}
.close-nav p{
  font-size: calc(24 /1920*100vw);
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  writing-mode: vertical-lr;
  margin-bottom: calc(20 /1920*100vw);
}
.close-nav i{
  display: block;
  width: calc(12 /1920*100vw);
  height: calc(22 /1920*100vw);
  background: url(../images/icon16.png) top center no-repeat;
  background-size: 100% 100%;
}

.open-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc(49 /1920*100vw);
  height: auto;
  background: url(../images/open_nav.png) top center no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 11;
  transition: all .8s;
  padding: calc(30 /1920*100vw) 0;
}
.open-nav.close{
  right: calc(-52 /1920*100vw);
}
.open-nav p{
  font-size: calc(24 /1920*100vw);
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  writing-mode: vertical-lr;
  margin-bottom: calc(20 /1920*100vw);
}
.open-nav i{
  display: block;
  width: calc(12 /1920*100vw);
  height: calc(22 /1920*100vw);
  background: url(../images/icon16.png) top center no-repeat;
  background-size: 100% 100%;
  transform: rotate(180deg);
}


.part .title{
  width: 100%;
  height: calc(60 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.part .title span{
  font-size: calc(65 /1920*100vw);
  color: #edd18f;
  position: relative;
}
.part .title span:before{
  display: block;
  content: "";
  width: calc(175 /1920*100vw);
  height: calc(59 /1920*100vw);
  background: url(../images/title_icon1.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  left: calc(-200 /1920*100vw);
  top: 50%;
  transform: translateY(-50%);
}
.part .title span:after{
  display: block;
  content: "";
  width: calc(175 /1920*100vw);
  height: calc(59 /1920*100vw);
  background: url(../images/title_icon2.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  right: calc(-200 /1920*100vw);
  top: 50%;
  transform: translateY(-50%);
}
.part .title i{
  display: block;
  width: calc(180 /1920*100vw);
  height: calc(20 /1920*100vw);
  position: absolute;
  top: calc(-40 /1920*100vw);
  left: 50%;
  margin-left: calc(-90 /1920*100vw);
}
.title2 i{
  background: url(../images/title_01.png) center center no-repeat;
  background-size: auto 100%;
}
.title2{
  margin-top: calc(150 /1920*100vw);
}
.title3 i{
  background: url(../images/title_02.png) center center no-repeat;
  background-size: auto 100%;
}
.title3{
  margin-top: calc(90 /1920*100vw);
}
.title4 i{
  background: url(../images/title_03.png) center center no-repeat;
  background-size: auto 100%;
}
.title4{
  margin-top: calc(112 /1920*100vw);
}
.title5 i{
  background: url(../images/title_04.png) center center no-repeat;
  background-size: auto 100%;
}
.title5{
  margin-top: calc(112 /1920*100vw);
}
.title6 i{
  background: url(../images/title_05.png) center center no-repeat;
  background-size: auto 100%;
}
.title6{
  margin-top: calc(96 /1920*100vw);
}


.content2{
  width: calc(1200 /1920*100vw);
  overflow: hidden;
  margin: calc(55 /1920*100vw) auto 0;
}
.content2 .user-no-login{
  width: calc(1200 /1920*100vw);
  height: calc(313 /1920*100vw);
  background: url(../images/icon8.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.content2 .user-no-login p{
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  color: #ffffff;
  line-height: calc(40 /1920*100vw);
  padding: 0 calc(280 /1920*100vw);
  position: absolute;
  top: 50%;
  left: 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);
  z-index: 2;
  cursor: pointer;
}
.content2 .user-no-character{
  width: calc(1200 /1920*100vw);
  height: calc(313 /1920*100vw);
  background: url(../images/icon8.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: relative;
}
.content2 .user-no-character p{
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  color: #ffffff;
  line-height: calc(40 /1920*100vw);
  padding: 0 calc(280 /1920*100vw);
  position: absolute;
  top: 50%;
  left: 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);
  z-index: 2;
}
.user-infomations{
  width: calc(1200 /1920*100vw);
  overflow: hidden;
}
.infomations-list{
  width: calc(1200 /1920*100vw);
  height: calc(313 /1920*100vw);
  background: url(../images/details_bg.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
}
.infomations-list li{
  width: calc(1130 /1920*100vw);
  height: calc(84 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
}
.infomations-list li:first-child{
  height: calc(65 /1920*100vw);
}
.infomations-list li span{
  font-size: calc(30 /1920*100vw);
  color: #ffe18b;
  padding: 0 calc(16 /1920*100vw);
}
.infomations-list li span.sp1{
  color: #ebebeb;
}
.infomations-list li:first-child i{
  display: block;
  width: calc(31 /1920*100vw);
  height: calc(31 /1920*100vw);
  background: url(../images/icon9.png) top center no-repeat;
  background-size: 100%;
}
.infomations-list li:first-child span{
  font-size: calc(38 /1920*100vw);
}
.infomations-list li .dot{
  display: block;
  width: calc(9 /1920*100vw);
  height: calc(9 /1920*100vw);
  background: url(../images/icon10.png) top center no-repeat;
  background-size: 100%;
}
.infomations-list li .line{
  display: block;
  width: 1px;
  height: calc(28 /1920*100vw);
  background: #ebebeb;
}
.infomations-list li .coins{
  display: block;
  width: calc(32 /1920*100vw);
  height: calc(32 /1920*100vw);
  background: url(../images/coins.png) top center no-repeat;
  background-size: 100%;
  margin-left: calc(16 /1920*100vw);
}
.lang-ar .infomations-list li .coins{
  margin-left: 0;
  margin-right: calc(16 /1920*100vw);
}
.user-infomations p{
  font-size: calc(24 /1920*100vw);
  line-height: calc(34 /1920*100vw);
  color: #887f6b;
  margin: calc(25 /1920*100vw) auto 0;
}

.mission-content{
  width: calc(1200 /1920*100vw);
  overflow: hidden;
  position: relative;
  margin: calc(40 /1920*100vw) auto 0;
}
.mission-list{
  width: calc(1200 /1920*100vw);
  overflow: hidden;
}
.mission-list li{
  width: calc(1200 /1920*100vw);
  height: calc(162 /1920*100vw);
  overflow: hidden;
  background: url(../images/li_bg.png) center center no-repeat;
  background-size: 100% 100%;
  margin-bottom: calc(15 /1920*100vw);
  box-sizing: border-box;
  padding: 0 calc(30 /1920*100vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mission-list li .mission-name{
  width: calc(880 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.mission-list li .mission-name p{
  font-size: calc(30 /1920*100vw);
  color: #ffe18b;
  line-height:calc(40 /1920*100vw);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.mission-list li .mission-name p:first-child{
  margin-bottom: calc(20 /1920*100vw);
}
.mission-list li .mission-name p i{
  display: block;
  width: calc(32 /1920*100vw);
  height: calc(32 /1920*100vw);
  background: url(../images/coins.png) center center no-repeat;
  background-size: 100% 100%;
}
.mission-list li .mission-name p span{
  font-size: calc(30 /1920*100vw);
  color: #fff;
  padding: 0 calc(8 /1920*100vw);
}
.mission-list li .mission-name p span.line{
  display: block;
  padding: 0;
  width: 1px;
  height: calc(26 /1920*100vw);
  background: #fff;
  margin: 0 calc(10 /1920*100vw);
}
.mission-list li .mission-btn{
  width: calc(187 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.mission-list li .mission-btn a{
  display: block;
  width: calc(187 /1920*100vw);
  height: calc(52 /1920*100vw);
  text-align: center;
  line-height: calc(52 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #000000;
}
.lang-tr .mission-list li .mission-btn a{
  font-size: calc(20 /1920*100vw);
}
.lang-ru .mission-list li .mission-btn a{
  font-size: calc(22 /1920*100vw);
}
.lang-de .mission-list li .mission-btn a{
  font-size: calc(22 /1920*100vw);
}
.mission-list li .mission-btn a.btn-share{
  background: url(../images/btn_share1.png) top center no-repeat;
  background-size: 100%;
}
.mission-list li .mission-btn a.btn-collect{
  background: url(../images/btn_collect.png) top center no-repeat;
  background-size: 100%;
}
.mission-list li .mission-btn a.btn-collected{
  background: url(../images/btn_collected.png) top center no-repeat;
  background-size: 100%;
  cursor: default;
}
.mission-list li .mission-btn span{
  font-size: calc(26 /1920*100vw);
  color: #cbc8bd;
  padding-top: calc(20 /1920*100vw);
}
.mission-content .mission-tips{
  font-size: calc(24 /1920*100vw);
  color: #887f6b;
  line-height: calc(30 /1920*100vw);
  margin-top: calc(10 /1920*100vw);
  margin-bottom: calc(10 /1920*100vw);
}
.mission-content .user-no-login{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0,0,0,.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
}
.mission-content .user-no-login div{
  width: calc(976 /1920*100vw);
  height: calc(177 /1920*100vw);
  background: url(../images/icon11.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 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);
}
.mission-content .user-no-login div p{
  width: calc(650 /1920*100vw);
  text-align: center;
  font-size: calc(30 /1920*100vw);
  color: #ffffff;
  line-height: calc(40 /1920*100vw);
  cursor: pointer;
}
.mission-content .user-no-character{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0,0,0,.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.mission-content .user-no-character div{
  width: calc(976 /1920*100vw);
  height: calc(177 /1920*100vw);
  background: url(../images/icon11.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 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);
}
.mission-content .user-no-character div p{
  width: calc(650 /1920*100vw);
  text-align: center;
  font-size: calc(30 /1920*100vw);
  color: #ffffff;
  line-height: calc(40 /1920*100vw);
}

.mission-content .event-ended{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0,0,0,.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.mission-content .event-ended div{
  width: calc(976 /1920*100vw);
  height: calc(177 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 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);
}
.mission-content .event-ended div i{
  display: block;
  width: calc(94 /1920*100vw);
  height: calc(78 /1920*100vw);
  background: url(../images/icon17.png) top center no-repeat;
  background-size: 100%;
  margin-bottom: calc(20 /1920*100vw);
}
.mission-content .event-ended div p{
  width: calc(650 /1920*100vw);
  text-align: center;
  font-size: calc(30 /1920*100vw);
  color: #ffd990;
  line-height: calc(40 /1920*100vw);
}

.guessing{
  width: calc(1200 /1920*100vw);
  height: calc(47 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(42 /1920*100vw) auto 0;
}
.guessing .btn-rewards{
  display: block;
  width: auto;
  height: calc(30 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #ffe18b;
  border-bottom: solid .01rem #ffe18b;
}
.guessing .btn-bet{
  display: flex;
  width: auto;
  height: calc(47 /1920*100vw);
  justify-content: center;
  align-items: center;
  background: url(../images/icon14.png) center center no-repeat;
  background-size: 100% 100%;
  padding: 0 calc(20 /1920*100vw);
}
.guessing .btn-bet i{
  display: block;
  width: calc(22 /1920*100vw);
  height: calc(24 /1920*100vw);
  background: url(../images/icon13.png) center center no-repeat;
  background-size: 100% 100%;
  margin: 0 calc(7 /1920*100vw);
}
.guessing .btn-bet span{
  font-size: calc(24 /1920*100vw);
  color: #fff;
}
.ranktablist{
  width: 100%;
  height: calc(102 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(24 /1920*100vw);
}
.ranktablist .tab{
  width: calc(401 /1920*100vw);
  height: calc(102 /1920*100vw);
  background: url(../images/tab3_0.png) center center no-repeat;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.ranktablist .tab.on{
  background: url(../images/tab3_1.png) center center no-repeat;
  background-size: 100% 100%;
}
.ranktablist .tab p{
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(15 /1920*100vw);
  text-align: center;
  line-height: calc(30 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #fbdf98;
}
.ranktablist .tab .btn-switch{
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}
.ranktablist .tab .btn-switch span{
  line-height: calc(30 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #fbdf98;
  padding: 0 calc(5 /1920*100vw);
}
.ranktablist .tab .btn-switch i{
  width: calc(24 /1920*100vw);
  height: calc(21 /1920*100vw);
  background: url(../images/icon15.png) center center no-repeat;
  background-size: 100% 100%;
}
.ranktablist .tab .regionlist{
  width: calc(401 /1920*100vw);
  height: calc(224 /1920*100vw);
  background: url(../images/regionlist_bg1.png) center center no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
  top: calc(100 /1920*100vw);
  right: 0;
  z-index: 2;
  padding-top: calc(2 /1920*100vw);
  display: none;
}
.ranktablist .tab .regionlist.open{
  display: block;
}
.ranktablist .tab .regionlist li{
  width: 100%;
  height: calc(44 /1920*100vw);
  text-align: center;
  line-height:calc(44 /1920*100vw);
  font-size: calc(18 /1920*100vw);;
  color: #fff9d1;
  border-bottom: solid 1px rgba(255,234,184,.4);
}
.ranktablist .tab .regionlist li:last-child{
  border-bottom: none;
}
.ranktablist .tab .regionlist li:hover{
  background: url(../images/selected.png) bottom center no-repeat;
  background-size: 100% auto;
}

.rankbox{
  width: calc(1200 /1920*100vw);
  overflow: hidden;
  margin: calc(8 /1920*100vw) auto 0;
}
.rankbox .box{
  display: none;
  width: calc(1200 /1920*100vw);
  height: calc(1120 /1920*100vw);
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.rankbox .box1{
  background: url(../images/rank_list_bg1.png) top center no-repeat;
  background-size: 100% auto;
}
.rankbox .box2{
  background: url(../images/rank_list_bg2.png) top center no-repeat;
  background-size: 100% auto;
}
.lang-ar .rankbox .box2{
  background: url(../images/rank_list_bg2_ar.png) top center no-repeat;
  background-size: 100% auto;
}
.rankbox .box3{
  background: url(../images/rank_list_bg3.png) top center no-repeat;
  background-size: 100% auto;
}
.rankbox .box.on{
  display: block;
}
.ranktitle{
  margin: calc(8 /1920*100vw) auto 0;
  width: 100%;
  height: calc(66 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ranktitle .td{
  width: calc(400 /1920*100vw);
  height: calc(66 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rankbox .box2 .ranktitle .td1{
  width: calc(157 /1920*100vw);
}
.rankbox .box2 .ranktitle .td2{
  width: calc(471 /1920*100vw);
}
.rankbox .box2 .ranktitle .td3{
  width: calc(300 /1920*100vw);
}
.rankbox .box2 .ranktitle .td4{
  width: calc(272 /1920*100vw);
}
.ranktitle .td span{
  font-size: calc(24 /1920*100vw);;
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  text-align: center;
  padding: 0 calc(10 /1920*100vw);
}
.rankbox .box ul{
  width: calc(1200 /1920*100vw);
  height: calc(654 /1920*100vw);
  overflow: hidden;
}
.rankbox .box3 ul{
  height: calc(720 /1920*100vw);
}
.rankbox .box ul li{
  width: calc(1200 /1920*100vw);
  height: calc(65 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rankbox .box ul li .td{
  width: calc(400 /1920*100vw);
  height: calc(66 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rankbox .box2 ul li .td1{
  width: calc(157 /1920*100vw);
}
.rankbox .box2 ul li .td2{
  width: calc(471 /1920*100vw);
}
.rankbox .box2 ul li .td3{
  width: calc(300 /1920*100vw);
}
.rankbox .box2 ul li .td4{
  width: calc(272 /1920*100vw);
}
.rankbox .box ul li .td span{
  font-size: calc(24 /1920*100vw);;
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  text-align: center;
  padding: 0 calc(10 /1920*100vw);
}
.rankbox .box ul li .td span.myrank-1{
  display: block;
  width: calc(42 /1920*100vw);
  height: calc(47 /1920*100vw);
  background: url(../images/rank1.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(49 /1920*100vw);
}
.rankbox .box ul li .td span.myrank-2{
  display: block;
  width: calc(42 /1920*100vw);
  height: calc(47 /1920*100vw);
  background: url(../images/rank2.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(49 /1920*100vw);
}
.rankbox .box ul li .td span.myrank-3{
  display: block;
  width: calc(42 /1920*100vw);
  height: calc(47 /1920*100vw);
  background: url(../images/rank3.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(49 /1920*100vw);
}
.rankbox .box .myrank{
  width: calc(1200 /1920*100vw);
  height: calc(66 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rankbox .box .myrank .td .myrank-1{
  display: block;
  width: calc(42 /1920*100vw);
  height: calc(47 /1920*100vw);
  background: url(../images/rank1.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(49 /1920*100vw);
}
.rankbox .box .myrank .td .myrank-2{
  display: block;
  width: calc(42 /1920*100vw);
  height: calc(47 /1920*100vw);
  background: url(../images/rank2.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(49 /1920*100vw);
}
.rankbox .box .myrank .td .myrank-3{
  display: block;
  width: calc(42 /1920*100vw);
  height: calc(47 /1920*100vw);
  background: url(../images/rank3.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(49 /1920*100vw);
}
.rankbox .box .myrank .user-no-login{
  width: calc(1200 /1920*100vw);
  height: calc(66 /1920*100vw);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.rankbox .box .myrank .user-no-login p{
  width: 100%;
  box-sizing: border-box;
  font-size: calc(24 /1920*100vw);;
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  text-align: center;
  padding: 0 calc(10 /1920*100vw);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.rankbox .box .myrank .user-no-character{
  width: calc(1200 /1920*100vw);
  height: calc(66 /1920*100vw);
  overflow: hidden;
  position: relative;
}
.rankbox .box .myrank .user-no-character p{
  width: 100%;
  box-sizing: border-box;
  font-size: calc(24 /1920*100vw);;
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  text-align: center;
  padding: 0 calc(10 /1920*100vw);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.rankbox .box .myrank .td{
  width: calc(400 /1920*100vw);
  height: calc(66 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rankbox .box2 .myrank .td1{
  width: calc(157 /1920*100vw);
}
.rankbox .box2 .myrank .td2{
  width: calc(471 /1920*100vw);
}
.rankbox .box2 .myrank .td3{
  width: calc(300 /1920*100vw);
}
.rankbox .box2 .myrank .td4{
  width: calc(272 /1920*100vw);
}

.rankbox .box .myrank .td span{
  font-size: calc(24 /1920*100vw);
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  text-align: center;
  padding: 0 calc(10 /1920*100vw);
}
.pagebox{
  width: calc(740 /1920*100vw);
  height: calc(44 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: calc(40 /1920*100vw) auto 0;
}
.pagebox .btn-prev{
  display: block;
  width: calc(21/1920*100vw);
  height: calc(40 /1920*100vw);
  background: url(../images/btn_prev.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(2 /1920*100vw);
  left: 0;
}
.pagebox .btn-prev.gray{
  cursor: default;
}
.pagebox .btn-next{
  display: block;
  width: calc(21 /1920*100vw);
  height: calc(40 /1920*100vw);
  background: url(../images/btn_next.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(2 /1920*100vw);
  right: 0;
}
.pagebox .btn-next.gray{
  cursor: default;
}
.pagebox .current-page{
  display: block;
  width: calc(60 /1920*100vw);
  height: calc(34 /1920*100vw);
  box-sizing: border-box;
  text-align: center;
  line-height: calc(34 /1920*100vw);
  background: none;
  outline: none;
  border: solid .01rem #625e55;
  color: #fff;
  font-size: calc(24 /1920*100vw);
  margin: 0 calc(30 /1920*100vw);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.pagebox span{
  line-height: calc(34 /1920*100vw);
  color: #fff;
  font-size: calc(24 /1920*100vw);
}
.pagebox .total-page{
  padding: 0 calc(30 /1920*100vw);
}
.pagebox .redirect{
  display: block;
  width: auto;
  height: calc(43 /1920*100vw);
  background: url(../images/redirect.png) center center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: calc(43 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #fbdf99;
  padding: 0 calc(20 /1920*100vw);
}
.pagebox .redirect.gray{
  background: url(../images/redirect1.png) center center no-repeat;
  background-size: 100%;
  color: #ccc;
  cursor: default;
}
.rank-tips{
  width: calc(1200 /1920*100vw);
  overflow: hidden;
  margin: calc(20 /1920*100vw) auto 0;
}
.rank-tips p{
  font-size: calc(24 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  color: #887f6b;
  margin-bottom: calc(10 /1920*100vw);
}

.part5 .mycoins{
  width: calc(1130 /1920*100vw);
  height: calc(45 /1920*100vw);
  overflow: hidden;
  margin: calc(50 /1920*100vw) auto 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.part5 .mycoins div{
  display: inline-block;
  width: auto;
  height: calc(45 /1920*100vw);
  background: url(../images/icon12.png) center center no-repeat;
  background-size: 100% 100%;
  padding: 0 calc(25 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.part5 .mycoins.gray div{
  cursor: default;
}
.part5 .mycoins div i{
  display: block;
  width: calc(32 /1920*100vw);
  height: calc(32 /1920*100vw);
  background: url(../images/coins.png) center center no-repeat;
  background-size: 100% 100%;
  margin: 0 calc(5 /1920*100vw);
}
.part5 .mycoins div span{
  font-size: calc(24 /1920*100vw);
  color: #ffffff;
  padding: 0 calc(5 /1920*100vw);
}
.prizelist{
  width: calc(1280 /1920*100vw);
  overflow: hidden;
  font-size: 0;
  text-align: center;
  margin: calc(22 /1920*100vw) auto 0;
}
.prizelist .prizebox{
  display: inline-block;
  width: calc(244 /1920*100vw);
  height: calc(360 /1920*100vw);
  overflow: hidden;
  background: url(../images/prize_bg1.png) top center no-repeat;
  background-size: 100%;
  margin: 0 calc(25 /1920*100vw) calc(32 /1920*100vw);
}
.prizelist .prizebox .prize{
  width: calc(244 /1920*100vw);
  height: calc(281 /1920*100vw);
  overflow: hidden;
  position: relative;
}
.prizelist .prizebox .prize img{
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.prizelist .prizebox .prize .nums{
  display: block;
  width: calc(58 /1920*100vw);
  height: calc(23 /1920*100vw);
  background: url(../images/icon3.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(3 /1920*100vw);
  left: calc(3 /1920*100vw);
  text-align: center;
  line-height: calc(23 /1920*100vw);
  font-size: calc(18 /1920*100vw);
  color: #ffe18b;
  z-index: 2;
}
.prizelist .prizebox .prize .prize-name{
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(10 /1920*100vw);
  text-align: center;
  line-height: calc(24 /1920*100vw);
  color: #dadada;
  font-size: calc(20 /1920*100vw);
  position: absolute;
  left: 0;
  bottom: calc(54 /1920*100vw);
  z-index: 2;
}
.lang-de .prizelist .prizebox .prize .prize-name{
  font-size: calc(17 /1920*100vw);
}
.prizelist .prizebox .prize .price{
  width: 100%;
  height: calc(44 /1920*100vw);
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 calc(10 /1920*100vw);
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.prizelist .prizebox .prize .price div{
  display: flex;
  width: auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.prizelist .prizebox .prize .price span{
  font-size: calc(18 /1920*100vw);
  color: #eaddb9;
  text-align: right;
  line-height: calc(18 /1920*100vw);
}
.lang-ru .prizelist .prizebox .prize .price span{
  font-size: calc(16 /1920*100vw);
  text-align: right;
  line-height: calc(16 /1920*100vw);
}
.prizelist .prizebox .prize .price div i{
  display: block;
  width: calc(24 /1920*100vw);
  height: calc(24 /1920*100vw);
  background: url(../images/coins.png) top center no-repeat;
  background-size: 100%;
}
.prizelist .prizebox .prize .price div span{
  padding: 0 calc(7 /1920*100vw);
}
.prizelist .prizebox a{
  display: block;
  width: calc(244 /1920*100vw);
  height: calc(59 /1920*100vw);
  text-align: center;
  line-height: calc(59 /1920*100vw);
  color: #000000;
  font-size: calc(26 /1920*100vw);
  margin: calc(7 /1920*100vw) auto 0;
}
.prizelist .prizebox a.btn-exchange{
  background: url(../images/btn_exchange.png) top center no-repeat;
  background-size: 100%;
}
.prizelist .prizebox a.btn-soldout{
  background: url(../images/sold_out.png) top center no-repeat;
  background-size: 100%;
  cursor: default;
}

.rule-content{
  width: calc(1200 /1920*100vw);
  height: calc(802 /1920*100vw); 
  background: url(../images/rule_box_bg.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  margin: calc(50 /1920*100vw) auto 0; 
}
.rule-content .rulebox{
  width: calc(1150 /1920*100vw);
  height: calc(710 /1920*100vw); 
  overflow-x: hidden;
  overflow-y: auto;
  margin: calc(35 /1920*100vw) auto 0; 
  padding: 0 calc(10 /1920*100vw); 
}
.rule-content .rulebox p{
  font-size: calc(24 /1920*100vw); 
  color: #eae3d5;
  line-height: calc(38 /1920*100vw); 
  margin-bottom: calc(15 /1920*100vw); 
}
.rule-content .rulebox p.ruletitle{
  font-size: calc(30 /1920*100vw); 
  color: #ffe29d;
  line-height: calc(44 /1920*100vw); 
}

.footer{
  width: 100vw;
  height: calc(103 /1920*100vw);
  overflow: hidden;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.footer p{
  font-size: calc(18 /1920*100vw);
  color: rgba(235,235,235,.3);
  line-height: calc(24 /1920*100vw);
}
.footer p a{
  color: rgba(235,235,235,.3);
}
.footer p span{
  padding: 0 calc(5 /1920*100vw);
}

.dialog{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(0,0,0,.8);
  display: none;
}
.pop{
  width: calc(759 /1920*100vw);
  height: calc(440 /1920*100vw);
  position: absolute;
  top: 50%;
  left: 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);
  background: url(../images/pop.png) top center no-repeat;
  background-size: 100% 100%;
}
.pop .close{
  display: block;
  width: calc(62 /1920*100vw);
  height: calc(63 /1920*100vw);
  background: url(../images/close.png) top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: calc(20 /1920*100vw);
  right: calc(-65 /1920*100vw);
}
.pop .poptitle{
  width: 100%;
  height: calc(67 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(60 /1920*100vw) auto 0;
}
.pop .poptitle span{
  font-size: calc(48 /1920*100vw);
  color: #d2b97f;
  position: relative;
}
.pop .poptitle span:before{
  display: block;
  content: "";
  width: calc(24 /1920*100vw);
  height: calc(67 /1920*100vw);
  background: url(../images/icon1.png) top center no-repeat;
  background-size: 100% 100%; 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(-70 /1920*100vw);
}
.pop .poptitle span:after{
  display: block;
  content: "";
  width: calc(24 /1920*100vw);
  height: calc(67 /1920*100vw);
  background: url(../images/icon2.png) top center no-repeat;
  background-size: 100% 100%; 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(-70 /1920*100vw);
}
.pop .btnlist{
  width: 100%;
  height: calc(62 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.pop .btnlist a{
  display: block;
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  text-align: center;
  line-height: calc(62 /1920*100vw);
  font-size: calc(26 /1920*100vw);
  color: #ffeab8;
  margin: 0 calc(22 /1920*100vw);
}
.lang-es .pop9 .btnlist a{
  font-size: calc(20 /1920*100vw);
}
.lang-ru .pop9 .btnlist a{
  font-size: calc(20 /1920*100vw);
}
.lang-pt .pop9 .btnlist a{
  font-size: calc(20 /1920*100vw);
}
.pop .btnlist a.btn-cancel{
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/btn_cancel.png) center center no-repeat;
  background-size: 100% 100%;
  color: #ffeab8;
}
.pop .btnlist a.btn-modify{
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/btn_certain.png) center center no-repeat;
  background-size: 100% 100%;
  color: #ffeab8;
}

.pop .btnlist a.btn-certain{
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/btn_certain.png) center center no-repeat;
  background-size: 100% 100%;
  color: #ffe18b;
}
.pop .btnlist a.btn-copy{
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/btn_certain.png) center center no-repeat;
  background-size: 100% 100%;
  color: #ffe18b;
}
.pop .btnlist a.btn-exchange{
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/btn_certain.png) center center no-repeat;
  background-size: 100% 100%;
  color: #ffe18b;
}
.pop .btnlist a.btn-bet{
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/btn_certain.png) center center no-repeat;
  background-size: 100% 100%;
  color: #ffe18b;
}
.pop .btnlist a.gray{
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/disable.png) center center no-repeat !important;
  background-size: 100% 100%;
  color: #000;
  cursor: default;
}
.pop .btnlist a.btn-beted{
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/btn_cancel.png) center center no-repeat;
  background-size: 100% 100%;
  color: #ffeab8;
  cursor: default;
}
.pop .btnlist a.btn-can-modify{
  width: calc(283 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/btn_certain.png) center center no-repeat;
  background-size: 100% 100%;
  color: #ffe18b;
}
.pop .tips{
  width: 100%;
  text-align: center;
  font-size: calc(24 /1920*100vw);
  line-height: calc(34 /1920*100vw);
  color: #ffffff;
  padding: 0 calc(60 /1920*100vw);
}

.pop1 .warn{
  width: 100%;
  text-align: center;
  font-size: calc(24 /1920*100vw);
  line-height: calc(34 /1920*100vw);
  color: #ffffff;
  padding: 0 calc(60 /1920*100vw);
  position: absolute;
  left: 0;
  top: 55%;
  transform: translateY(-50%);
}
.pop2 .tips{
  margin-top: calc(50 /1920*100vw);
}
.pop2 .btnlist{
  margin: calc(50 /1920*100vw) auto 0;
}
.pop3 .tips{
  margin-top: calc(60 /1920*100vw);
}
.pop3 .btnlist{
  margin: calc(60 /1920*100vw) auto 0;
}
.pop4 .tips{
  margin-top: calc(110 /1920*100vw);
}
.pop4 .sharelink{
  width: calc(700 /1920*100vw);
  height: auto;
  background: #131212;
  box-sizing: border-box;
  padding: calc(10 /1920*100vw);
  border: solid 1px #5f543f;
  text-align: center;
  line-height: calc(34 /1920*100vw);
  font-size: calc(20 /1920*100vw);
  color: #e2d2b7;
  margin: calc(45 /1920*100vw) auto 0;
}
.pop4 .btnlist{
  margin: calc(50 /1920*100vw) auto 0;
}
.pop5{
  height: calc(651 /1920*100vw);
  background: url(../images/pop1.png) top center no-repeat;
  background-size: 100% 100%;
}
.pop5 .poptitle{
  margin: calc(45 /1920*100vw) auto 0;
}
.pop5 .poptitle span{
  font-size: calc(38 /1920*100vw);
}
.pop5 .prizebox{
  width: calc(192 /1920*100vw);
  height: calc(191 /1920*100vw);
  overflow: hidden;
  margin: calc(5 /1920*100vw) auto 0;
  position: relative;
  background: url(../images/prize_bg.png) top center no-repeat;
  background-size: 100%;
}
.pop5 .prizebox .prize{
  width: 100%;
  overflow: hidden;
}
.pop5 .prizebox .prize img{
  display: block;
  width: 100%;
  height: auto;
}
.pop5 .prizebox span{
  display: block;
  width: calc(58 /1920*100vw);
  height: calc(23 /1920*100vw);
  background: url(../images/icon3.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(2 /1920*100vw);
  left: calc(2 /1920*100vw);
  text-align: center;
  line-height: calc(23 /1920*100vw);
  font-size: calc(18 /1920*100vw);
  color: #ffe18b;
}
.pop5 .prizebox p{
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(10 /1920*100vw);
  text-align: center;
  line-height: calc(24 /1920*100vw);
  color: #dadada;
  font-size: calc(20 /1920*100vw);
  position: absolute;
  left: 0;
  bottom: calc(12 /1920*100vw);
}
.lang-de .pop5 .prizebox p{
  font-size: calc(14 /1920*100vw);
}
.pop5 .tips{
  font-size: calc(22 /1920*100vw);
  margin-top: calc(12 /1920*100vw);
  margin-bottom: calc(12 /1920*100vw);
}
.pop5 .count-box{
  width: 100%;
  height: calc(41 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.pop5 .count-box a{
  display: block;
  width: calc(31 /1920*100vw);
  height: calc(32 /1920*100vw);
}
.pop5 .count-box a.cut{
  background: url(../images/btn_cut.png) top center no-repeat;
  background-size: 100%;
}
.pop5 .count-box a.cut.gray{
  filter: grayscale(1);
}
.pop5 .count-box a.add{
  background: url(../images/btn_add.png) top center no-repeat;
  background-size: 100%;
}
.pop5 .count-box a.add.gray{
  filter: grayscale(1);
}
.pop5 .count-box input{
  display: block;
  width: calc(192 /1920*100vw);
  height: calc(41 /1920*100vw);
  background: url(../images/input_bg.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  margin: 0 calc(7 /1920*100vw);
  border: none;
  outline: none;
  text-align: center;
  line-height: calc(41 /1920*100vw);
  font-size: calc(20 /1920*100vw);
  color: #e4dac9;
}
.pop5 .remaining{
  font-size: calc(22 /1920*100vw);
  margin-top: calc(12 /1920*100vw);
  margin-bottom: calc(12 /1920*100vw);
  width: 100%;
  text-align: center;
  line-height: calc(34 /1920*100vw);
  color: #ffffff;
  padding: 0 calc(60 /1920*100vw);
}
.pop5 .coins-left{
  width: calc(660 /1920*100vw);
  height: auto;
  box-sizing: border-box;
  padding: calc(10 /1920*100vw);
  background: url(../images/icon4.png) top center no-repeat;
  background-size: 100% 100%;
  margin: calc(10 /1920*100vw) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.pop5 .coins-left p{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(18 /1920*100vw);
  line-height: calc(24 /1920*100vw);
  color: #e2d2b7;
}
.pop5 .coins-left p i{
  display: block;
  width: calc(24 /1920*100vw);
  height: calc(24 /1920*100vw);
  background: url(../images/coins.png) top center no-repeat;
  background-size: 100%;
  margin: 0 calc(10 /1920*100vw);
}
.pop5 .btnlist{
  margin: calc(20 /1920*100vw) auto 0;
}
.pop6 .tips{
  margin-top: calc(60 /1920*100vw);
}
.pop6 .btnlist{
  margin: calc(60 /1920*100vw) auto 0;
}
.pop7 .tips{
  margin-top: calc(60 /1920*100vw);
}
.pop7 .btnlist{
  margin: calc(60 /1920*100vw) auto 0;
}
.pop8{
  height: calc(562 /1920*100vw);
  background: url(../images/pop2.png) top center no-repeat;
  background-size: 100% 100%;
}
.pop8 .tablist8{
  width: calc(748 /1920*100vw);
  height: calc(77 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(29 /1920*100vw) auto 0;
}
.pop8 .tablist8 a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(374 /1920*100vw);
  height: calc(77 /1920*100vw);
  background: url(../images/tab1_0.png) center center no-repeat;
  background-size: 100% 100%;
}
.pop8 .tablist8 a.on{
  background: url(../images/tab1_1.png) center center no-repeat;
  background-size: 100% 100%;
}
.pop8 .tablist8 a p{
  width: 90%;
  text-align: center;
  font-size: calc(24 /1920*100vw);
  line-height: calc(26 /1920*100vw);
  color: #ffeab8;
}
.pop8 .tablist8 a.on p{
  color: #ffe18b;
}
.pop8 .pointslist{
  width: calc(746 /1920*100vw);
  height: calc(444 /1920*100vw);
  overflow: hidden;
  margin: 0 auto;
}
.pop8 .pointslist ul{
  display: none;
  width: calc(746 /1920*100vw);
  height: calc(444 /1920*100vw);
  overflow-x: hidden;
  overflow-y: auto;
}
.pop8 .pointslist ul.on{
  display: block;
}
.pop8 .pointslist ul li{
  width: calc(746 /1920*100vw);
  height: calc(74 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop8 .pointslist ul li:nth-child(even) {
    background: rgba(198,179,132,.1);
}
.pop8 .pointslist ul li .td{
  height: calc(74 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center; 
  box-sizing: border-box;
  padding: 0 calc(10 /1920*100vw);
}
.pop8 .pointslist ul li .td1{
  width: calc(190 /1920*100vw);
}
.pop8 .pointslist ul li .td2{
  width: calc(366 /1920*100vw);
}
.pop8 .pointslist ul li .td3{
  width: calc(190 /1920*100vw);
}
.pop8 .pointslist ul li .td span{
  font-size: calc(18 /1920*100vw);
  color: #ede3d1;
  line-height: calc(22 /1920*100vw);
  text-align: center;
}
.pop8 .pointslist ul li .td i{
  display: block;
  width: calc(24 /1920*100vw);
  height: calc(24 /1920*100vw);
  background: url(../images/coins.png) center center no-repeat;
  background-size: 100%;
  margin: 0 calc(5 /1920*100vw);
}

.pop9{
  height: calc(662 /1920*100vw);
  background: url(../images/pop3.png) top center no-repeat;
  background-size: 100% 100%;
}
.pop9 .tablist9{
  width: calc(746 /1920*100vw);
  height: calc(101 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(29 /1920*100vw) auto 0;
}
.pop9 .tablist9 a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(250 /1920*100vw);
  height: calc(101 /1920*100vw);
  background: url(../images/tab2_0.png) center center no-repeat;
  background-size: 100% 100%;
  margin: 0 calc(-1 /1920*100vw);
}
.pop9 .tablist9 a.on{
  width: calc(251 /1920*100vw);
  background: url(../images/tab2_1.png) center center no-repeat;
  background-size: 100% 100%;
}
.pop9 .tablist9 a p{
  width: 95%;
  text-align: center;
  font-size: calc(18 /1920*100vw);
  line-height: calc(22 /1920*100vw);
  color: #ffeab8;
}
.lang-de .pop9 .tablist9 a p{
  font-size: calc(16 /1920*100vw);
}
.pop9 .tablist9 a.on p{
  color: #ffe18b;
}
.pop9 .mycoins{
  width: calc(706 /1920*100vw);
  height: calc(56 /1920*100vw);
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.pop9 .mycoins span{
  font-size: calc(18 /1920*100vw);
  color: #ede3d1;
  line-height: calc(24 /1920*100vw);
}
.pop9 .mycoins i{
  display: block;
  width: calc(32 /1920*100vw);
  height: calc(32 /1920*100vw);
  background: url(../images/coins.png) center center no-repeat;
  background-size: 100%;
  margin: 0 calc(10 /1920*100vw);
}
.pop9 .boxlist{
  width: 100%;
  height: calc(470 /1920*100vw);
}
.pop9 .boxlist .box{
  display: none;
  width: 100%;
  height: calc(470 /1920*100vw);
}
.pop9 .boxlist .box.on{
  display: block;
}
.pop9 .boxlist .box .option-box{
  width: calc(667 /1920*100vw);
  height: calc(185 /1920*100vw);
  background: url(../images/icon5.png) center center no-repeat;
  background-size: 100%;
  overflow: hidden;
  margin: 0 auto;
}
.pop9 .boxlist .box .option-box p{
  text-align: center;
  font-size: calc(24 /1920*100vw);
  color: #ffeab8;
  line-height: calc(30 /1920*100vw);
  margin-top: calc(15 /1920*100vw);
  margin-bottom: calc(5 /1920*100vw);
}
.pop9 .boxlist .box .option-box .optionlist{
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}
.pop9 .boxlist .box .result-bet .option-box .optionlist{
  margin: calc(25 /1920*100vw) auto;
}
.pop9 .boxlist .box .option-box .optionlist a{
  display: inline-block;
  width: calc(188 /1920*100vw);
  height: calc(48 /1920*100vw);
  background: url(../images/option_bg.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(48 /1920*100vw);
  font-size: calc(18 /1920*100vw);
  color: #ffeab8;
  margin: calc(7 /1920*100vw) calc(11 /1920*100vw);
  overflow: hidden;
}
.pop9 .boxlist .box .option-box .optionlist.gray a{
  cursor: default;
}
.lang-ja .pop9 .boxlist .box .option-box .optionlist a{
  font-size: calc(16 /1920*100vw);
}
.pop9 .boxlist .box .option-box .optionlist a.on{
  background: url(../images/option_bg1.png) center center no-repeat;
  background-size: 100%;
}
.pop9 .boxlist .box .option-box .optionlist a.bet-right{
  background: url(../images/option_bg2.png) center center no-repeat;
  background-size: 100%;
}
.pop9 .boxlist .box .option-box .optionlist a.bet-wrong{
  background: url(../images/option_bg3.png) center center no-repeat;
  background-size: 100%;
}
.pop9 .boxlist .box .option-box .optionlist a.no-bet-right{
  background: url(../images/option_bg4.png) center center no-repeat;
  background-size: 100%;
}
.pop9 .boxlist .box .option-box .optionlist a.has-beted{
  background: url(../images/option_bg5.png) center center no-repeat;
  background-size: 100%;
}
.pop9 .boxlist .box .bet-amount{
  display: block;
  width: calc(400 /1920*100vw);
  height: calc(48 /1920*100vw);
  background: url(../images/select_bg.png) center center no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: calc(25 /1920*100vw) auto;
  cursor: pointer;
}
.pop9 .bet-amount .anountlist{
  width: calc(400 /1920*100vw);
  overflow: hidden;
  height: 0;
  transition: all .8s;
  position: absolute;
  top: calc(48 /1920*100vw);
  left: 0;
  background: rgba(0,0,0,.85);
}
.pop9 .bet-amount .anountlist.open{
  height: calc(304 /1920*100vw);
}
.pop9 .bet-amount .anountlist:after{
  display: block;
  content: "";
  width: 100%;
  height: calc(304 /1920*100vw);
  background: url(../images/icon7.png) center center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
}
.pop9 .bet-amount .anountlist li{
  width: 100%;
  height: calc(38 /1920*100vw);
  overflow: hidden;
  text-align: center;
  line-height: calc(38 /1920*100vw);
  text-align: center;
  font-size: calc(18 /1920*100vw);
  color: #fff9d1;
  box-sizing: border-box;
  border-bottom: solid 1px #68604b;
  cursor: pointer;
}
.pop9 .bet-amount .anountlist li:hover{
  background: url(../images/selected.png) bottom center no-repeat;
  background-size: 100% auto;
}
.pop9 .boxlist .box .bet-amount p{
  text-align: center;
  font-size: calc(20 /1920*100vw);
  color: #ede3d1;
  line-height: calc(48 /1920*100vw);
}
.pop9 .boxlist .box .bet-amount i{
  display: block;
  width: calc(14 /1920*100vw);
  height: calc(12 /1920*100vw);
  background: url(../images/icon6.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  right: calc(15 /1920*100vw);
  top: 50%;
  transform: translateY(-50%);
}
.pop9 .boxlist .box .bet-details{
  text-align: center;
}
.pop9 .boxlist .box .bet-details a{
  font-size: calc(18 /1920*100vw);
  color: #f9d980;
  line-height: calc(24 /1920*100vw);
  text-decoration: underline;
}
.pop9 .btnlist{
  margin-top: calc(20 /1920*100vw);
}
.pop9 .boxlist .box .bet-times{
  font-size: calc(15 /1920*100vw);
  color: #ede3d1;
  line-height: calc(24 /1920*100vw);
  text-align: center;
  margin-top: calc(20 /1920*100vw);
}
.pop9 .boxlist .box .result-bet .bet-times{
  margin-top: calc(110 /1920*100vw);
}

.not-open-bet{
  width: calc(667 /1920*100vw);
  height: calc(185 /1920*100vw);
  background: url(../images/icon5.png) center center no-repeat;
  background-size: 100%;
  overflow: hidden;
  margin: calc(100 /1920*100vw) auto 0;
}
.not-open-bet p{
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(20 /1920*100vw);
  text-align: center;
  font-size: calc(20 /1920*100vw);
  color: #e2d2b7;
  line-height: calc(30 /1920*100vw);
}
.not-open-bet p:first-child{
  color: #ffeab8;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  margin-top: calc(50 /1920*100vw);
}

.pop10{
  height: calc(651 /1920*100vw);
  background: url(../images/pop1.png) top center no-repeat;
  background-size: 100% 100%;
}
.pop10 .box{
  width: calc(667 / 1920 * 100vw);
  height: calc(120 / 1920 * 100vw);
  background: url(../images/icon5.png) center center no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  margin: calc(20 / 1920 * 100vw) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop10 .box p{
  width: 100%;
  text-align: center;
  font-size: calc(24 /1920*100vw);
  line-height: calc(34 /1920*100vw);
  color: #ffffff;
  padding: 0 calc(20 /1920*100vw);
}
.pop10 .my-bet{
  width: calc(640 / 1920 * 100vw);
  overflow: hidden;
  margin: calc(30 / 1920 * 100vw) auto calc(50 / 1920 * 100vw);
}
.pop10 .my-bet li{
  width: 100%;
  height: calc(60 / 1920 * 100vw);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pop10 .my-bet li p{
  width: calc(310 / 1920 * 100vw);
  font-size: calc(20 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  color: #ffffff;
}
.pop10 .my-bet li div{
  width: calc(320 / 1920 * 100vw);
  height: calc(45 / 1920 * 100vw);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.35);
  border: solid 1px #94815d;
}
.pop10 .my-bet li div span{
  font-size: calc(20 /1920*100vw);
  color: #ffeab8;
  line-height: calc(30 /1920*100vw);
  padding: 0 calc(13 /1920*100vw);
}
.pop10 .my-bet li div i{
  display: block;
  width: calc(24 / 1920 * 100vw);
  height: calc(24 / 1920 * 100vw);
  background: url(../images/coins.png) center center no-repeat;
  background-size: 100% 100%;
}

.pop11 .tips{
  margin-top: calc(60 /1920*100vw);
}
.pop11 .btnlist{
  margin: calc(60 /1920*100vw) auto 0;
}
.pop12 .tips{
  margin-top: calc(45 /1920*100vw);
}
.pop12 .btnlist{
  margin: calc(45 /1920*100vw) auto 0;
}
.pop13{
  width: calc(939 /1920*100vw);
  height: calc(658 /1920*100vw);
  background: url(../images/pop4.png) top center no-repeat;
  background-size: 100% 100%;
}
.pop13 .allprize{
  width: calc(925 /1920*100vw);
  height: calc(490 /1920*100vw);
  overflow-x: hidden;
  overflow-y: auto;
  margin: calc(25 /1920*100vw) auto 0;
  border-top: solid 1px #52472a;
}
.pop13 .allprize .line{
  width: calc(925 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}
.pop13 .allprize .line1{
  height: calc(66 /1920*100vw);
}
.pop13 .allprize .line2{
  height: calc(150 /1920*100vw);
}
.pop13 .allprize .line3{
  height: calc(750 /1920*100vw);
}
.pop13 .allprize .line4{
  height: calc(750 /1920*100vw);
}
.pop13 .allprize .line .td{
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #52472a;
}
.pop13 .allprize .line .td1{
  width: calc(165 /1920*100vw);
}
.pop13 .allprize .line .td2{
  width: calc(380 /1920*100vw);
}
.pop13 .allprize .line .td3{
  width: calc(380 /1920*100vw);
}
.pop13 .allprize .line .td span{
  color: #ffffff;
  font-size: calc(20 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  text-align: center;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(10 /1920*100vw);
}
.pop13 .allprize .line .td .prizebox{
  width: calc(170 /1920*100vw);
  height: calc(120 /1920*100vw);
  overflow: hidden;
  margin: 0 calc(10 /1920*100vw);
}
.pop13 .allprize .line .td .prizebox img{
  display: block;
  width: calc(70 /1920*100vw);
  height: auto;
  margin: 0 auto calc(5 /1920*100vw);
}
.pop13 .allprize .line .td .prizebox p{
  color: #ffffff;
  font-size: calc(16 /1920*100vw);
  line-height: calc(22 /1920*100vw);
  text-align: center;
}
.pop13 .allprize .line .td ul{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pop13 .allprize .line .td ul li{
  width: 100%;
  height: calc(150 /1920*100vw);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: solid 1px #52472a;
}
.pop13 .prize-tips{
  width: 90%;
  margin: calc(20 /1920*100vw) auto 0;
  font-size: calc(18 /1920*100vw);
  color: #ede3d1;
  line-height: calc(28 /1920*100vw);
}
.pop13 .prize-tips2{
  margin-bottom: calc(40 /1920*100vw);
}

.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: #ffdb58;
  box-shadow: none;
}




@-webkit-keyframes fadeInDown {
  0% {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

@keyframes fadeInDown {
  0% {
    -webkit-transform: translateY(200px);
    -ms-transform: translateY(200px);
    transform: translateY(200px);

    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loader {
  border: calc(16 /1920*100vw) solid #e2e2e2;
  border-top: calc(16 /1920*100vw) solid #0FE195;
  border-radius: 50%;
  width: calc(120 /1920*100vw);
  height: calc(120 /1920*100vw);
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#loading-overlay.hidden {
  display: none;
}

li.nodata{
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}
li.nodata p{
  width: 100% !important;
  font-size: calc(24 / 1920 * 100vw) !important;
  color: #ede3d1 !important;
  line-height: calc(34 / 1920 * 100vw) !important;
  text-align: center !important; 
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#ot-sdk-btn {
  color: rgba(235,235,235,.3) !important;
  border: none !important;
  padding: 0 !important;
  font-size: calc(18 /1920*100vw) !important;
  background-color: transparent !important;
}