@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:'NotoSansJPRegular';src:url("../fonts/NotoSansJP-Regular.ttf");}
@font-face{font-family:'NotoSansJPSemiBold';src:url("../fonts/NotoSansJP-SemiBold.ttf");}

@font-face{font-family:'NotoSansKRRegular';src:url("../fonts/NotoSansKR-Regular.ttf");}
@font-face{font-family:'NotoSansKRSemiBold';src:url("../fonts/NotoSansKR-SemiBold.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: 'NotoSansJPRegular';
}
.lang-ja{
  font-family: "NotoSansJPRegular";
}
.lang-ja .bold{
  font-family: "NotoSansJPSemiBold";
}
.lang-ko{
  font-family: "NotoSansKRRegular";
}
.lang-ko .bold{
  font-family: "NotoSansKRSemiBold";
}
.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(1030 /1920*100vw);
  background: url(../images/part1.jpg) top center no-repeat;
  background-size: 100%;
}
.part2{
  background: url(../images/part2.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,1);
}
.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: #9d000d;
}
.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(60 /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(943 /1920*100vw);
  height: calc(285 /1920*100vw);
  background: url(../images/slogan_en.png) center center no-repeat;
  background-size: 100%;
  margin: calc(155 /1920*100vw) auto 0; 
  position: relative;
}



.stitle{
  width: calc(1450 /1920*100vw);
  text-align: center;
  font-size: calc(30 /1920*100vw);
  color: #ee281e;
  line-height: calc(30 /1920*100vw);
  margin: calc(250 /1920*100vw) auto 0; 
}
.time{
  display: block;
  width: calc(347 /1920*100vw);
  height: calc(43 /1920*100vw);
  text-align: center;
  font-size: calc(22 /1920*100vw);
  color: #f1de9d;
  line-height: calc(43 /1920*100vw);
  margin: calc(30 /1920*100vw) auto 0; 
  background: url(../images/time_bg.png) center center no-repeat;
  background-size: 100%;
}
.slogan1{
  display: block;
  width: calc(738 /1920*100vw);
  height: calc(158 /1920*100vw);
  background: url(../images/slogan1_en.png) center center no-repeat;
  background-size: 100%;
  margin: calc(305 /1920*100vw) auto 0; 
}
.stitle1{
  width: calc(1800 /1920*100vw);
  text-align: center;
  font-size: calc(24 /1920*100vw);
  color: #fff;
  line-height: calc(34 /1920*100vw);
  margin: calc(10 /1920*100vw) auto 0; 
}

.content{
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.course-box{
  width: calc(1506 /1920*100vw);
  height: calc(462 /1920*100vw);
  background: url(../images/box_bg1.png) center center no-repeat;
  background-size: 100%;
  margin: calc(0 /1920*100vw) auto 0; 
  position: relative;
}
.course-box .course{
  width: calc(613 /1920*100vw);
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0; 
}
.course-box .heat-course{
  left: calc(113 /1920*100vw);
}
.course-box .finals-course{
  right: calc(113 /1920*100vw);
}
.course-box .course .details{
  display: block;
  width: calc(503 /1920*100vw);
  height: calc(77 /1920*100vw);
  background: url(../images/icon1.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(77 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #ffffff;
  position: absolute;
  left: 0;
  top: calc(75 /1920*100vw);
}
.course-box .course .intros{
  width: 100%;
  font-size: calc(24 /1920*100vw);
  line-height: calc(34 /1920*100vw);
  padding: calc(10 /1920*100vw) 0;
  color: #f1de9d;
  position: absolute;
  left: 0;
  bottom: calc(195 /1920*100vw);
  border-bottom: solid calc(2 /1920*100vw) #948e7c;
}
.course-box .course .type{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: calc(150 /1920*100vw);
}
.course-box .course .type i{
  display: block;
  width: calc(12 /1920*100vw);
  height: calc(14 /1920*100vw);
  background: url(../images/icon2.png) center center no-repeat;
  background-size: 100%;
}
.course-box .course .type span{
  font-size: calc(20 /1920*100vw);
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  padding: 0 calc(10 /1920*100vw);
}
.course-box .btn-signup{
  display: block;
  width: calc(356 /1920*100vw);
  height: calc(70 /1920*100vw);
  background: url(../images/btn_join.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(70 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #421104;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: calc(-178 /1920*100vw);
}
.course-box .btn-signup.gray{
  background: url(../images/btn_join1.png) center center no-repeat;
  background-size: 100%;
}
.supply-box{
  width: calc(1500 /1920*100vw);
  height: calc(282 /1920*100vw);
  background: url(../images/box_bg2.png) center center no-repeat;
  background-size: 100%;
  margin: calc(60 /1920*100vw) auto calc(110 /1920*100vw); 
  position: relative;
}
.supply-box .supply{
  width: calc(613 /1920*100vw);
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0; 
  left: calc(107 /1920*100vw);
}
.supply-box .supply .details{
  display: block;
  width: calc(503 /1920*100vw);
  height: calc(72 /1920*100vw);
  line-height: calc(72 /1920*100vw);
  font-size: calc(36 /1920*100vw);
  color: #ffffff;
  position: absolute;
  left: 0;
  top: calc(30 /1920*100vw);
  border-bottom: solid calc(1 /1920*100vw) #fff5d4;
}
.supply-box .supply .intros{
  width: 100%;
  font-size: calc(24 /1920*100vw);
  line-height: calc(34 /1920*100vw);
  color: #f1de9d;
  position: absolute;
  left: 0;
  top: calc(125 /1920*100vw);
}
.supply-box .supply .type{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  left: 0;
  top: calc(205 /1920*100vw);
}
.supply-box .supply .type i{
  display: block;
  width: calc(12 /1920*100vw);
  height: calc(14 /1920*100vw);
  background: url(../images/icon2.png) center center no-repeat;
  background-size: 100%;
}
.supply-box .supply .type span{
  font-size: calc(20 /1920*100vw);
  color: #ffffff;
  line-height: calc(30 /1920*100vw);
  padding: 0 calc(10 /1920*100vw);
}
.supply-box .btn-join{
  display: block;
  width: calc(356 /1920*100vw);
  height: calc(70 /1920*100vw);
  background: url(../images/btn_join.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(70 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #421104;
  position: absolute;
  right: calc(130 /1920*100vw);
  top: 50%;
  margin-top: calc(-35 /1920*100vw);
}

.title{
  width: 100%;
  text-align: center;
  line-height: calc(88 /1920*100vw);
  font-size: calc(48 /1920*100vw);
  color: #fec27e;
}
.title2{
  margin-top: calc(60 /1920*100vw);
}
.title3{
  margin-top: calc(100 /1920*100vw);
}
.title4{
  margin-top: calc(65 /1920*100vw);
}
.title5{
  margin-top: calc(85 /1920*100vw);
}
.title6{
  margin-top: calc(100 /1920*100vw);
}
.title7{
  margin-top: calc(100 /1920*100vw);
}
.title8{
  margin-top: calc(130 /1920*100vw);
}
.title9{
  margin-top: calc(65 /1920*100vw);
}
.title10{
  margin-top: calc(125 /1920*100vw);
}
.title span{
  position: relative;
}
.title span:before{
  display: block;
  content: "";
  width: calc(35 /1920*100vw);
  height: calc(88 /1920*100vw);
  background: url(../images/title_icon1.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: calc(-44 /1920*100vw);
  left: calc(-55 /1920*100vw);
}
.title span:after{
  display: block;
  content: "";
  width: calc(34 /1920*100vw);
  height: calc(88 /1920*100vw);
  background: url(../images/title_icon2.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: calc(-44 /1920*100vw);
  right: calc(-55 /1920*100vw);
}
.rankdetails{
  width: calc(1500 /1920*100vw);
  height: calc(40 /1920*100vw);
  overflow: hidden;
  margin: calc(35 /1920*100vw) auto 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.rankdetails span{
  font-size: calc(24 /1920*100vw);
  color: #ffffff;
  padding: 0 calc(14 /1920*100vw);
}
.rankdetails span:first-child{
  display: inline-block;
  height: calc(40 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  padding: 0 calc(40 /1920*100vw);
  background: url(../images/icon4.png) top center no-repeat;
  background-size: 100% 100%;
}
.rank-refresh{
  width: calc(1500 /1920*100vw);
  margin: calc(14 /1920*100vw) auto 0;
  font-size: calc(18 /1920*100vw);
  color: #f1de9d;
  line-height: calc(28 /1920*100vw);
}
.rank-content{
  width: calc(1500 /1920*100vw);
  height: calc(694 /1920*100vw);
  position: relative;
  margin: calc(12 /1920*100vw) auto 0;
}
.rank-content .ranklist-box{
  width: calc(969 /1920*100vw);
  height: calc(694 /1920*100vw);
  background: url(../images/box_bg3.png) center center no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
}
.ranklist-box .ranktab{
  width: calc(942 /1920*100vw);
  height: calc(82 /1920*100vw);
  background: url(../images/icon5.png) center center no-repeat;
  background-size: 100%;
  margin: calc(11 /1920*100vw) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ranklist-box .ranktab .tab{
  width: calc(470 /1920*100vw);
  height: calc(80 /1920*100vw);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.ranklist-box .ranktab .tab.on{
  background: url(../images/tab_on.png) center center no-repeat;
  background-size: 100% 100%;
}
.ranklist-box .ranktab .tab p{
  width: 100%;
  text-align: center;
  font-size: calc(20 /1920*100vw);
  color: #fff;
  line-height: calc(26 /1920*100vw);
}
.ranklist-box .ranktab .tab .btn-switch{
  display: block;
  width: calc(62 /1920*100vw);
  height: calc(62 /1920*100vw);
  background: url(../images/icon3.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(9 /1920*100vw);
  right: calc(30 /1920*100vw);
}

.ranklist-box .ranktab .tab .ranktypelist{
  width: calc(263 /1920*100vw);
  height: auto;
  background: url(../images/ul_bg.png) center center no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
  top: calc(80 /1920*100vw);
  right: 0;
  z-index: 2;
  padding-bottom: calc(10 /1920*100vw);
  display: none;
}
.ranklist-box .ranktab .tab .ranktypelist.open{
  display: block;
}
.ranklist-box .ranktab .tab .ranktypelist li{
  width: 100%;
  height: calc(70 /1920*100vw);
  text-align: center;
  line-height:calc(70 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #ffffff;
  position: relative;
  cursor: pointer;
}
.ranklist-box .ranktab .tab .ranktypelist li:hover{
  color: #f1de9d;
}
.ranklist-box .ranktab .tab .ranktypelist li:after{
  display: block;
  content: "";
  width: calc(202 /1920*100vw);
  height: calc(02 /1920*100vw);
  background: #7c442f;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: calc(-101 /1920*100vw);
}
.ranklist{
  width: calc(942 /1920*100vw);
  height: calc(600 /1920*100vw);
  overflow: hidden;
  margin: 0 auto;
  display: none;
}
.ranklist.on{
  display: block;
}
.ranklist .ranktitle{
  width: calc(886 /1920*100vw);
  height: calc(68 /1920*100vw);
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: solid calc(1 /1920*100vw) #694d26;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ranklist .ranktitle .td{
  width: 25%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 calc(2 /1920*100vw);
}
.ranklist .ranktitle .td span{
  text-align: center;
  font-size: calc(20 /1920*100vw);
  color: #f1de9d;
  line-height: calc(26 /1920*100vw);
}
.ranklist ul{
  width: calc(925 /1920*100vw);
  height: calc(490 /1920*100vw);
  overflow-x: hidden;
  overflow-y: auto;
}
.ranklist ul li{
  width: calc(886 /1920*100vw);
  height: calc(49 /1920*100vw);
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: solid calc(1 /1920*100vw) #694d26;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ranklist ul li .td{
  width: 25%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 calc(2 /1920*100vw);
}
.ranklist ul li .td span{
  text-align: center;
  font-size: calc(18 /1920*100vw);
  color: #fff;
  line-height: calc(24 /1920*100vw);
}
.ranklist ul li:nth-child(1) .td1 span{
  display: block;
  width: calc(26 /1920*100vw);
  height: calc(29 /1920*100vw);
  background: url(../images/rank1.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(29 /1920*100vw);
}
.ranklist ul li:nth-child(2) .td1 span{
  display: block;
  width: calc(26 /1920*100vw);
  height: calc(29 /1920*100vw);
  background: url(../images/rank2.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(29 /1920*100vw);
}
.ranklist ul li:nth-child(3) .td1 span{
  display: block;
  width: calc(26 /1920*100vw);
  height: calc(29 /1920*100vw);
  background: url(../images/rank3.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(29 /1920*100vw);
}
.ranklist ul li .td .youtube{
  display: block;
  width: calc(30 /1920*100vw);
  height: calc(30 /1920*100vw);
  background: url(../images/youtube.png) center center no-repeat;
  background-size: 100%;
}
.ranklist ul li .td .twitch{
  display: block;
  width: calc(30 /1920*100vw);
  height: calc(30 /1920*100vw);
  background: url(../images/twitch.png) center center no-repeat;
  background-size: 100%;
}
.ranklist ul li .td .chzzk{
  display: block;
  width: calc(30 /1920*100vw);
  height: calc(30 /1920*100vw);
  background: url(../images/chzzk.png) center center no-repeat;
  background-size: 100%;
}
.ranklist ul li .td .soop{
  display: block;
  width: calc(30 /1920*100vw);
  height: calc(30 /1920*100vw);
  background: url(../images/soop.png) center center no-repeat;
  background-size: 100%;
}
.ranklist ul li .td .tiktok{
  display: block;
  width: calc(30 /1920*100vw);
  height: calc(30 /1920*100vw);
  background: url(../images/tiktok.png) center center no-repeat;
  background-size: 100%;
}

.rank-content .myrank{
  width: calc(475 /1920*100vw);
  height: calc(844 /1920*100vw);
  background: url(../images/box_bg4.png) center center no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
}
.myrank .details{
  width: calc(455 /1920*100vw);
  height: calc(132 /1920*100vw);
  overflow: hidden;
  margin: calc(242 /1920*100vw) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.myrank .details p{
  width: 100%;
  text-align: center;
  font-size: calc(18 /1920*100vw);
  color: #ffffff;
  line-height: calc(28 /1920*100vw);
}
.myrank .details p:first-child{
  font-size: calc(36 /1920*100vw);
  line-height: calc(50 /1920*100vw);
}
.myrank ul{
  width: calc(455 /1920*100vw);
  margin: 0 auto;
  overflow: hidden; 
}
.myrank ul li{
  width: 100%;
  height: calc(118 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.myrank ul li:nth-child(1){
  background: rgba(42,16,9,.57);
  height: calc(105 /1920*100vw);
  line-height: calc(105 /1920*100vw);
}
.myrank ul li:nth-child(3){
  background: rgba(42,16,9,.57);
  height: calc(105 /1920*100vw);
}
.myrank ul li p{
  width: 100%;
  text-align: center;
  font-size: calc(20 /1920*100vw);
  line-height: calc(34 /1920*100vw);
  color: #f1de9d;
}
.myrank ul li p:first-child{
  color: #fff;
}
.myrank ul li.nodata{
  margin-top: calc(160 /1920*100vw);
}
.myrank ul li.nodata p:first-child{
  color: #f1de9d;
  font-size: calc(24 /1920*100vw);
}
.rank-btn-list{
  width: calc(1500 /1920*100vw);
  height: calc(77 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(36 /1920*100vw) auto 0;
}
.rank-btn-list a{
  display: block;
  width: calc(279 /1920*100vw);
  height: calc(77 /1920*100vw);
  background: url(../images/btn1.png) top center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(77 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #fff;
  margin: 0 calc(21 /1920*100vw);
}

.all-rank-box{
  width: calc(1660 /1920*100vw);
  height: calc(640 /1920*100vw);
  overflow: hidden;
  margin: calc(10 /1920*100vw) auto 0;
  position: relative;
}
.mySwiper-1{
  width: calc(1500 /1920*100vw);
  height: calc(640 /1920*100vw);
  overflow: hidden;
  margin: 0 auto;
}
.mySwiper-1 .swiper-slide{
  width: calc(1500 /1920*100vw);
  height: calc(640 /1920*100vw);
  overflow: hidden;
}
.mySwiper-1 .swiper-slide p{
  width: 100%;
  height: calc(80 /1920*100vw);
  text-align: center;
  line-height: calc(80 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #fff;
}
.mySwiper-1 .swiper-slide ul{
  width: calc(1500 /1920*100vw);
  height: calc(528 /1920*100vw);
  overflow: hidden;
  background: url(../images/box_bg5.png) top center no-repeat;
  background-size: 100%;
}
.mySwiper-1 .swiper-slide ul li{
  width: 100%;
  height: calc(55 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mySwiper-1 .swiper-slide ul li:first-child{
  height: calc(84 /1920*100vw);
}
.mySwiper-1 .swiper-slide ul li .td{
  width: 33.3333%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mySwiper-1 .swiper-slide ul li .td span{
  font-size: calc(22 /1920*100vw);
  color: #ffffff;
  line-height: calc(26 /1920*100vw);
  text-align: center;
}
.all-rank-box .btn-prev1{
  display: block;
  width: calc(67 /1920*100vw);
  height: calc(80 /1920*100vw);
  background: url(../images/btn_prev.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(295 /1920*100vw);
  left: 0;
}
.all-rank-box .btn-next1{
  display: block;
  width: calc(67 /1920*100vw);
  height: calc(80 /1920*100vw);
  background: url(../images/btn_next.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(295 /1920*100vw);
  right: 0;
}
.all-rank-box .swiper-pagination1{
  width: 100%;
  bottom: 0;
  left: 0;
}
.all-rank-box .swiper-pagination1 .swiper-pagination-bullet{
  width: calc(137 /1920*100vw);
  height: calc(6 /1920*100vw);
  border-radius: 0;
  background: #888888;
  margin: 0 calc(17 /1920*100vw);
  opacity: 1;
}
.all-rank-box .swiper-pagination1 .swiper-pagination-bullet-active{
  background: #ff8d00;
  opacity: 1;
}
.allrank-btn-list{
  width: calc(1500 /1920*100vw);
  height: calc(77 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(36 /1920*100vw) auto calc(120 /1920*100vw);
}
.allrank-btn-list a{
  display: block;
  width: calc(411 /1920*100vw);
  height: calc(77 /1920*100vw);
  background: url(../images/btn2.png) top center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(77 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #fff;
  margin: 0 calc(98 /1920*100vw);
}

/*finals*/
.competition-rule{
  width: calc(1504 /1920*100vw);
  height: calc(589 /1920*100vw);
  background: url(../images/box_bg6.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: calc(17 /1920*100vw) auto 0;
}
.competition-rule p{
  width: calc(1320 /1920*100vw);
  margin: calc(15 /1920*100vw) auto;
  font-size: calc(26 /1920*100vw);
  color: #ffffff;
  line-height: calc(36 /1920*100vw);
  position: relative;
}
.competition-rule p:before{
  display: block;
  content: "";
  width: calc(12 /1920*100vw);
  height: calc(14 /1920*100vw);
  background: url(../images/icon7.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(12 /1920*100vw);
  left: calc(-24 /1920*100vw);
}

.finals-prize{
  width: calc(1511 /1920*100vw);
  height: calc(609 /1920*100vw);
  background: url(../images/box_bg7.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  margin: calc(18 /1920*100vw) auto 0;
}
.finals-prize p{
  width: 100%;
  height: calc(84 /1920*100vw);
  text-align: center;
  line-height: calc(84 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #fff;
  margin-top: calc(32 /1920*100vw);
}
.finals-prize ul{
  width: 100%;
  overflow: hidden;
}
.finals-prize ul li{
  width: 100%;
  height: calc(79 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.finals-prize ul li .td{
  width: 50%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.finals-prize ul li .td span{
  font-size: calc(26 /1920*100vw);
  color: #f1de9d;
  line-height: calc(36 /1920*100vw);
  text-align: center;
}

.competition-intro{
  width: calc(1501 /1920*100vw);
  /*height: calc(624 /1920*100vw);*/
  height: calc(830 /1920*100vw);
  background: url(../images/box_bg8.png) top center no-repeat;
  background-size: 100%;
  overflow: hidden;
  margin: calc(18 /1920*100vw) auto 0;
  position: relative;
}
.lang-ko .competition-intro{
  margin: calc(18 /1920*100vw) auto calc(140 /1920*100vw);
}
.lang-zh .competition-intro{
  margin: calc(18 /1920*100vw) auto calc(140 /1920*100vw);
}
.competition-intro p{
  width: 100%;
  text-align: center;
  font-size: calc(18 /1920*100vw);
  color: #ffffff;
  line-height: calc(24 /1920*100vw);
}
.competition-intro p.p1{
  color: #f1de9d;
  font-size: calc(24 /1920*100vw);
  line-height: calc(34 /1920*100vw);
  margin-top: calc(35 /1920*100vw);
}
.competition-intro p.p1:first-child{
  margin-top: calc(50 /1920*100vw);
}
.competition-intro p.p1 span{
  position: relative;
}
.competition-intro p.p1 span:before{
  display: block;
  content: "";
  width: calc(12 /1920*100vw);
  height: calc(14 /1920*100vw);
  background: url(../images/icon7.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  left: calc(-22 /1920*100vw);
  top: 50%;
  margin-top: calc(-7 /1920*100vw);
}
.competition-intro p.p1 span:after{
  display: block;
  content: "";
  width: calc(13 /1920*100vw);
  height: calc(24 /1920*100vw);
  background: url(../images/icon8.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  right: calc(-22 /1920*100vw);
  top: 50%;
  margin-top: calc(-7 /1920*100vw);
}
.competition-intro .btnlist{
  width: 100%;
  height: calc(77 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(30 /1920*100vw);
}
.competition-intro .btnlist a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(449 /1920*100vw);
  height: calc(77 /1920*100vw);
  background: url(../images/btn3.png) top center no-repeat;
  background-size: 100%;
  margin: 0 calc(21 /1920*100vw);
}
.competition-intro .btnlist a span{
  font-size: calc(24 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  color: #ffffff;
}
.competition-intro .btnlist .btn-official i{
  display: block;
  width: calc(29 /1920*100vw);
  height: calc(29 /1920*100vw);
  background: url(../images/icon10.png) top center no-repeat;
  background-size: 100%; 
  margin: 0 calc(12 /1920*100vw);
}
.lang-ja .competition-intro .btnlist .btn-official i{
  width: calc(27 /1920*100vw);
  height: calc(27 /1920*100vw);
  background: url(../images/media_x.png) top center no-repeat;
  background-size: 100%;
}
.competition-intro .btnlist .btn-live i{
  display: block;
  width: calc(37 /1920*100vw);
  height: calc(27 /1920*100vw);
  background: url(../images/icon11.png) top center no-repeat;
  background-size: 100%; 
  margin: 0 calc(12 /1920*100vw);
}
.competition-intro .btnlist .btn-live1 i{
  width: calc(27 /1920*100vw);
  height: calc(27 /1920*100vw);
  background: url(../images/icon15.png) top center no-repeat;
  background-size: 100%; 
}
.lang-ko .competition-intro .btnlist .btn-live1 i{
  width: calc(30 /1920*100vw);
  height: calc(30 /1920*100vw);
  background: url(../images/discord.png) top center no-repeat;
  background-size: 100%; 
}
.competition-intro .btn-signup{
  display: block;
  width: calc(356 /1920*100vw);
  height: calc(65 /1920*100vw);
  background: url(../images/btn_join.png) top center no-repeat;
  background-size: 100%; 
  margin: calc(80 /1920*100vw) auto 0;
  text-align: center;
  line-height: calc(65 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #421104;
}
.competition-intro .deadline{
  width: 100%;
  height: calc(70 /1920*100vw);
  text-align: center;
  line-height: calc(70 /1920*100vw);
  font-size: calc(20 /1920*100vw);
  color: #ffffff;
}
.competition-intro .countdown{
  display: inline-block;
  width: auto;
  height: calc(54 /1920*100vw);
  background: url(../images/icon12.png) center center no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  padding: 0 calc(30 /1920*100vw);
  text-align: center;
  line-height: calc(54 /1920*100vw);
  font-size: calc(26 /1920*100vw);
  color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.video-box{
  width: calc(1509 /1920*100vw);
  height: calc(809 /1920*100vw);
  background: url(../images/video_poster.png) top center no-repeat;
  background-size: 100%; 
  overflow: hidden;
  margin: calc(16 /1920*100vw) auto 0;
  position: relative;
}
.video-box .btn-play{
  display: block;
  width: calc(222 /1920*100vw);
  height: calc(222 /1920*100vw);
  background: url(../images/btn_play.png) top center no-repeat;
  background-size: 100%; 
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: calc(-111 /1920*100vw);
  margin-top: calc(-111 /1920*100vw);
}
.ruledetails-btn{
  width: calc(1501 /1920*100vw);
  height: calc(77 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(40 /1920*100vw) auto 0;
}
.ruledetails-btn a{
  display: block;
  width: calc(736 /1920*100vw);
  height: calc(77 /1920*100vw);
  background: url(../images/btn4.png) top center no-repeat;
  background-size: 100%; 
  text-align: center;
  line-height: calc(77 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #fff;
}
.ruledetails-btn a.on{
  background: url(../images/btn15.png) top center no-repeat;
  background-size: 100%; 
}
.ruledetails-box{
  width: calc(1509 /1920*100vw);
  height: calc(766 /1920*100vw);
  background: url(../images/box_bg9.png) top center no-repeat;
  background-size: 100%; 
  overflow: hidden;
  margin: 0 auto calc(120 /1920*100vw);
}
.ruledetails-box div{
  width: calc(1480 /1920*100vw);
  height: calc(700 /1920*100vw);
  overflow-x: hidden;
  overflow-y: auto;
  margin: calc(30 /1920*100vw) auto 0;
  display: none;
}
.ruledetails-box div.current{
  display: block;
}
.ruledetails-box div img{
  display: block;
  width: calc(800 /1920*100vw);
  height: auto;
  margin: 0 auto;
}
.btn-record{
  width: 100%;
  height: calc(82 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.btn-record a{
  font-size: calc(36 /1920*100vw);
  color: #fff;
  line-height: calc(46 /1920*100vw);
  text-decoration: underline;
}
.mission-tab{
  width: 100%;
  height: calc(77 /1920*100vw);
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mission-tab a{
  display: block;
  width: calc(497 /1920*100vw);
  height: calc(77 /1920*100vw);
  background: url(../images/btn7.png) top center no-repeat;
  background-size: 100%; 
  text-align: center;
  line-height: calc(77 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  margin: 0 calc(2 /1920*100vw);
  color: #fff;
}
.mission-tab a.on{
  background: url(../images/btn8.png) top center no-repeat;
  background-size: 100%; 
}
.mission-box{
  width: calc(1497 /1920*100vw);
  overflow: hidden;
  margin: calc(13 /1920*100vw) auto 0;
}
.mission-box .box1{
  width: calc(1497 /1920*100vw); 
  height: calc(800 /1920*100vw);
  position: relative;
  display: none;
}
.mission-box .box3{
  width: calc(1497 /1920*100vw); 
  height: calc(1000 /1920*100vw);
  background: url(../images/box_bg12.png) top center no-repeat;
  background-size: 100% 100%; 
  position: relative;
  display: none;
}
.mission-box .box2{
  width: calc(1497 /1920*100vw); 
  height: calc(820 /1920*100vw);
  background: url(../images/box_bg12.png) top center no-repeat;
  background-size: 100% 100%; 
  position: relative;
  display: none;
}
.mission-box .box.on{
  display: block;
}
.mission-box .box1 ul{
  width: calc(1490 /1920*100vw);
  overflow: hidden;
  margin: calc(1 /1920*100vw) auto 0;
  background: url(../images/box_bg12.png) top center no-repeat;
  background-size: 100% 100%; 
}
.mission-box .box1 .timestips{
  width: 100%;
  font-size: calc(20 / 1920 * 100vw);
  line-height: calc(30 / 1920 * 100vw);
  color: #ffffff;
  margin-top: calc(20 / 1920 * 100vw);
}
.mission-box .box1 ul li{
  width: 100%;
  height: calc(236 /1920*100vw);
  position: relative;
  box-sizing: border-box;
  border-bottom: solid calc(1 /1920*100vw) #be9668;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 calc(28 /1920*100vw);
}
.mission-box .box1 ul li .mission-name{
  width: calc(550 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  color: #ffffff;
}
.mission-box .box1 ul li .btn-go{
  display: block;
  width: calc(277 /1920*100vw);
  height: calc(69 /1920*100vw);
  text-align: center;
  line-height: calc(69 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #421104;
  background: url(../images/btn_go.png) top center no-repeat;
  background-size: 100%;
  margin-top: calc(24 /1920*100vw);
}
.mission-box .box1 ul li .btn-completed{
  display: block;
  width: calc(277 /1920*100vw);
  height: calc(69 /1920*100vw);
  text-align: center;
  line-height: calc(69 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #421104;
  background: url(../images/btn_completed.png) top center no-repeat;
  background-size: 100%;
  margin-top: calc(24 /1920*100vw);
}
.mission-prize{
  width: calc(896 /1920*100vw);
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: calc(574 /1920*100vw);
}
.mission-prize:before{
  display: block;
  content: "";
  width: calc(680 /1920*100vw);
  height: calc(7 /1920*100vw);
  background: #fca049;
  position: absolute;
  left: 50%;
  margin-left: calc(-340 /1920*100vw);
  top: calc(80 /1920*100vw);
}
.mission-prize.completed:before{
  background: #a69b91;
}
.mission-prize .prize{
  width: calc(192 /1920*100vw);
  height: 100%;
  overflow: hidden;
  margin: 0 calc(16 /1920*100vw);
  position: relative;
}
.mission-prize .prize .prizebox{
  width: calc(192 /1920*100vw);
  height: calc(192 /1920*100vw);
  overflow: hidden;
  background: url(../images/mission_prize_bg3.png) top center no-repeat;
  background-size: 100%;
}
.mission-prize .prize.collect .prizebox{
  background: url(../images/mission_prize_bg1.png) top center no-repeat;
  background-size: 100%;
  cursor: pointer;
}
.mission-prize .prize.collected .prizebox{
  background: url(../images/mission_prize_bg2.png) top center no-repeat;
  background-size: 100%;
  cursor: pointer;
}
.mission-prize .prize.collect .prizebox:after{
  display: block;
  content: "";
  width: calc(20 /1920*100vw);
  height: calc(20 /1920*100vw);
  border-radius: 50%;
  background: #ff0000;
  position: absolute;
  top: calc(6 /1920*100vw);
  right: calc(6 /1920*100vw);
}
.mission-prize .prize .prizebox .prizeimg{
  width: calc(166 /1920*100vw);
  height: calc(100 /1920*100vw);
  overflow: hidden;
  margin: calc(16 /1920*100vw) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mission-prize .prize .prizebox .prizeimg img{
  display: block;
  width: calc(68 /1920*100vw);
  height: calc(68 /1920*100vw);
}
.mission-prize .prize .prizebox .prizename{
  width: calc(150 /1920*100vw);
  height: calc(56 /1920*100vw); 
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mission-prize .prize .prizebox .prizename p{
  width: 100%;
  text-align: center;
  font-size: calc(18 /1920*100vw); 
  line-height: calc(22 /1920*100vw); 
  color: #ffffff;
}
.mission-prize .prize .times{
  text-align: center;
  font-size: calc(18 /1920*100vw); 
  color: #f1de9d;
  line-height: calc(22 /1920*100vw); 
  margin: calc(-8 /1920*100vw) auto 0;
}

.invite-prizes{
  width: 100%;
  overflow: hidden;
  font-size: 0;
  text-align: center;
}
.invite-prizes .prize{
  width: calc(447 /1920*100vw); 
  height: calc(287 /1920*100vw); 
  overflow: hidden;
  display: inline-block;
  margin: 0 calc(20 /1920*100vw); 
}
.invite-prizes .prize .invite-nums{
  width: 100%;
  text-align: center;
  line-height: calc(32 /1920*100vw); 
  margin-top: calc(20 /1920*100vw); 
  font-size: calc(18 /1920*100vw); 
  color: #f1de9d;
}
.invite-prizes .prize .prizebox{
  width: calc(447 /1920*100vw);
  height: calc(234 /1920*100vw);
  overflow: hidden;
  position: relative;
}
.invite-prizes .prize1 .prizebox{
  background: url(../images/invite_prize1.png) top center no-repeat;
  background-size: 100%;
}
.invite-prizes .prize2 .prizebox{
  background: url(../images/invite_prize2.png) top center no-repeat;
  background-size: 100%;
}
.invite-prizes .prize3 .prizebox{
  background: url(../images/invite_prize3.png) top center no-repeat;
  background-size: 100%;
}
.invite-prizes .prize4 .prizebox{
  background: url(../images/invite_prize4.png) top center no-repeat;
  background-size: 100%;
}
.invite-prizes .prize5 .prizebox{
  background: url(../images/invite_prize5.png) top center no-repeat;
  background-size: 100%;
}
.invite-prizes .prize .prizebox .namelist{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: calc(105 /1920*100vw);
}
.invite-prizes .prize .prizebox .namelist p{
  width: 20%;
  text-align: center;
  font-size: calc(16 /1920*100vw);
  color: #fff;
  line-height: calc(24 /1920*100vw);
  margin: 0 1%;
}
.invite-prizes .prize1 .prizebox .namelist p:last-child{
  width: 30%;
}
.invite-prizes .prize2 .prizebox .namelist p:last-child{
  width: 30%;
}
.invite-prizes .prize3 .prizebox .namelist p{
  margin: 0 5%;
}
.invite-prizes .prize4 .prizebox .namelist p{
  margin: 0 5%;
}
.invite-prizes .prize5 .prizebox .namelist p{
  margin: 0 3%;
}
.invite-prizes .prize .prizebox a{
  display: block;
  width: calc(216 /1920*100vw);
  height: calc(27 /1920*100vw);
  text-align: center;
  line-height: calc(27 /1920*100vw);
  font-size: calc(18 /1920*100vw);
  color: #000000;
  position: absolute;
  bottom: calc(16 /1920*100vw);
  left: 50%;
  margin-left: calc(-108 /1920*100vw);
}
.invite-prizes .prize .prizebox a.btn-collected{
  background: url(../images/btn_collected1.png) top center no-repeat;
  background-size: 100%;
}
.invite-prizes .prize .prizebox a.btn-collect{
  background: url(../images/btn_collect1.png) top center no-repeat;
  background-size: 100%;
}
.invite-prizes .prize .prizebox a.btn-incomplete{
  background: url(../images/btn_incomplete.png) top center no-repeat;
  background-size: 100%;
}
.btn-invite{
  display: block;
  width: calc(446 /1920*100vw);
  height: calc(50 /1920*100vw);
  background: url(../images/btn9.png) top center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: calc(50 /1920*100vw);
  font-size: calc(26 /1920*100vw);
  color: #421104;
  margin: calc(35 /1920*100vw) auto 0;
}
.invite-warns{
  text-align: center;
  font-size: calc(16 /1920*100vw);
  color: #f1de9d;
  line-height: calc(24 /1920*100vw);
  margin-top: calc(20 /1920*100vw);
}
.invite-warns1{
  text-align: center;
  font-size: calc(16 /1920*100vw);
  color: #f1de9d;
  line-height: calc(24 /1920*100vw);
}
.month-list{
  width: 100%;
  height: calc(60 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.month-list .btn-prev{
  display: block;
  width: calc(29 /1920*100vw);
  height: calc(15 /1920*100vw);
  background: url(../images/btn_prev1.png) top center no-repeat;
  background-size: 100%;
}
.month-list a.disable{
  filter: brightness(0.5);
  cursor: default;
}
.month-list .btn-next{
  display: block;
  width: calc(29 /1920*100vw);
  height: calc(15 /1920*100vw);
  background: url(../images/btn_next1.png) top center no-repeat;
  background-size: 100%;
}
.month-list span{
  font-size: calc(30 /1920*100vw);
  color: #f1de9d;
  padding: 0 calc(50 /1920*100vw);
  text-decoration: underline;
}
.month-box{
  width: calc(1492 /1920*100vw);
  overflow: hidden;
  margin: 0 auto;
}
.month-box .month{
  display: none;
  width: calc(1492 /1920*100vw);
  height: calc(833 /1920*100vw);
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.month-box .month3{
  background: url(../images/march_bg.png) top center no-repeat;
  background-size: 100%;
}
.month-box .month4{
  background: url(../images/april_bg.png) top center no-repeat;
  background-size: 100%;
}
.month-box .month.on{
  display: block;
}
.month .month-title{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: calc(1492 /1920*100vw);
  height: calc(46 /1920*100vw);
  margin: 0 auto;
}
.month .month-title span{
  display: block;
  width: calc(213 /1920*100vw);
  height: calc(46 /1920*100vw);
  text-align: center;
  line-height: calc(46 /1920*100vw);
  font-size: calc(24 /1920*100vw);
  color: #f1de9d;
}
.pre-visit-mission{
  width: calc(640 /1920*100vw);
  height: calc(114 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  right: 0;
}
.pre-visit-mission1{
  top: calc(382 /1920*100vw);
}
.pre-visit-mission2{
  top: calc(532 /1920*100vw);
}
.pre-visit-mission3{
  top: calc(682 /1920*100vw);
}
.pre-visit-mission4{
  top: calc(82 /1920*100vw);
}
.pre-visit-mission p{
  width: 100%;
  text-align: center;
  font-size: calc(18 /1920*100vw);
  color: #f1de9d;
  line-height: calc(28 /1920*100vw);
  margin-bottom: calc(5 /1920*100vw);
}
.pre-visit-mission a{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(2 /1920*100vw) calc(25 /1920*100vw);
  font-size: calc(18 /1920*100vw);
  line-height: calc(28 /1920*100vw);
  color: #000000;
  background: #af4a3a;
  cursor: default;
}
.pre-visit-mission a.btn-collect{
  background: #ff5b35;
  cursor: pointer;
}
.pre-visit-mission a.btn-uncollect{
  background: #717171;
}
.pre-visit-mission a i{
  display: block;
  width: calc(20 /1920*100vw);
  height: calc(20 /1920*100vw);
  background: url(../images/coins.png) center center no-repeat;
  background-size: 100%;
  margin: 0 calc(5 /1920*100vw);
}
.final-visit-mission{
  width: calc(214 /1920*100vw);
  height: calc(114 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: calc(382 /1920*100vw);
}
.final-visit-mission1{
  right: calc(426 /1920*100vw);
}
.final-visit-mission2{
  right: calc(212 /1920*100vw);
}
.final-visit-mission3{
  right: calc(-2 /1920*100vw);
}
.final-visit-mission p{
  width: 100%;
  text-align: center;
  font-size: calc(18 /1920*100vw);
  color: #f1de9d;
  line-height: calc(28 /1920*100vw);
  margin-bottom: calc(5 /1920*100vw);
}
.final-visit-mission a{
  display: block;
  width: calc(208 /1920*100vw);
  height: calc(60 /1920*100vw);
  text-align: center;
  color: #000000;
  background: #af4a3a;
  cursor: default;
  text-align: center;
  font-size: 0;
}
.final-visit-mission a.btn-collect{
  background: #ff5b35;
  cursor: pointer;
}
.final-visit-mission a.btn-uncollect{
  background: #717171;
}
.final-visit-mission a span{
  font-size: calc(18 /1920*100vw);
  line-height: calc(28 /1920*100vw);
}
.final-visit-mission a i{
  display: inline-block;
  width: calc(20 /1920*100vw);
  height: calc(16 /1920*100vw);
  background: url(../images/coins.png) center center no-repeat;
  background-size: 100%;
  margin: 0 calc(5 /1920*100vw);
  vertical-align: middle;
}

.btn-history{
  width: 100%;
  height: calc(82 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.btn-history a{
  font-size: calc(36 /1920*100vw);
  color: #fff;
  line-height: calc(46 /1920*100vw);
  text-decoration: underline;
}
.draw-times{
  display: flex;
  width: calc(1500 /1920*100vw);
  height: calc(50 /1920*100vw);
  margin: 0 auto;
}
.draw-times p{
  line-height: calc(50 /1920*100vw);
  background: url(../images/draw_times.png) top center no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: calc(28 /1920*100vw);
  box-sizing: border-box;
  padding: 0 calc(30 /1920*100vw);
}
.draw-times p span{
  color: #fca049;
}
.lottery-box{
  width: calc(1536 /1920*100vw);
  height: calc(686 /1920*100vw);
  margin: 0 auto;
  position: relative;
}
.grid-item{
  display: block;
  width: calc(397 /1920*100vw);
  height: calc(240 /1920*100vw);
  background: url(../images/grid1.png) top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  color: #f1de9d;
  font-size: calc(22 /1920*100vw);
  line-height: 1.2;
  text-align: center;
}
.grid-item.on{
  background: url(../images/grid2.png) top center no-repeat;
  background-size: 100% 100%;
}
.grid-item img{
  display: block;
  width: calc(350 /1920*100vw);
  height: calc(150 /1920*100vw);
  position: absolute;
  left: 50%;
  margin-left: calc(-175 /1920*100vw);
  top: calc(15 /1920*100vw);
}
.grid-item p{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(358 /1920*100vw);
  height: calc(58 /1920*100vw);
  position: absolute;
  bottom: calc(18 /1920*100vw);
  left: calc(18 /1920*100vw);
}
.grid-item:nth-child(1){
  top: 0;
  left: 0;
}
.grid-item:nth-child(2){
  top: 0;
  left: calc(380 /1920*100vw);
}
.grid-item:nth-child(3){
  top: 0;
  left: calc(760 /1920*100vw);
}
.grid-item:nth-child(4){
  top: 0;
  right: 0;
}
.grid-item:nth-child(5){
  top: calc(222 /1920*100vw);
  right: 0;
}
.grid-item:nth-child(7){
  bottom: 0;
  right: 0;
}
.grid-item:nth-child(8){
  bottom: 0;
  left: calc(760 /1920*100vw);
}
.grid-item:nth-child(9){
  bottom: 0;
  left: calc(380 /1920*100vw);
}
.grid-item:nth-child(10){
  bottom: 0;
  left: 0;
}
.grid-item:nth-child(11){
  top: calc(222 /1920*100vw);
  left: 0;
}
.btn-start{
  display: block;
  width: calc(748 /1920*100vw);
  height: calc(206 /1920*100vw);
  background: url(../images/btn-start.png) top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: calc(240 /1920*100vw);
  left: calc(392 /1920*100vw);
}
.btn-start a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(506 /1920*100vw);
  height: calc(92 /1920*100vw);
  position: absolute;
  top: calc(56 /1920*100vw);
  left: calc(116 /1920*100vw);
  color: #421104;
  font-size: calc(36 /1920*100vw);
  line-height: 1.2;
}
.btn-start a:before{
  display: block;
  content: '';
  width: calc(26 /1920*100vw);
  height: calc(31 /1920*100vw);
  background: url(../images/btn-start1.png) top center no-repeat;
  background-size: 100% 100%;
  margin-right: calc(12 /1920*100vw);
}
.draw-tips{
  display: block;
  width: calc(1500 /1920*100vw);
  font-size: calc(18 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  color: #fff;
  text-align: center;
  margin: calc(10 /1920*100vw) auto calc(110 /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(1260 /1920*100vw);
  height: calc(681 /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: 0;
  right: calc(-80 /1920*100vw);
}
.pop .poptitle{
  width: 100%;
  height: calc(65 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(70 /1920*100vw) auto 0;
}
.pop .poptitle span{
  font-size: calc(48 /1920*100vw);
  color: #fec27e;
  position: relative;
}
.pop .poptitle span:before{
  display: block;
  content: "";
  width: calc(25 /1920*100vw);
  height: calc(65 /1920*100vw);
  background: url(../images/title_icon1.png) top center no-repeat;
  background-size: 100% 100%; 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(-30 /1920*100vw);
}
.pop .poptitle span:after{
  display: block;
  content: "";
  width: calc(25 /1920*100vw);
  height: calc(65 /1920*100vw);
  background: url(../images/title_icon2.png) top center no-repeat;
  background-size: 100% 100%; 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(-30 /1920*100vw);
}
.pop .btnlist{
  width: 100%;
  height: calc(86 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.pop .btnlist a{
  display: block;
  width: calc(378 /1920*100vw);
  height: calc(86 /1920*100vw);
  text-align: center;
  line-height: calc(86 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #421104;
  margin: 0 calc(22 /1920*100vw);
  background: url(../images/btn_ok.png) center center no-repeat;
  background-size: 100% 100%;
}

.pop1 .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: 50%;
  transform: translateY(-50%);
}
.pop2 .tips1{
  width: 100%;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  color: #f1de9d;
  padding: 0 calc(60 /1920*100vw);
  margin-top: calc(125 /1920*100vw);
}
.pop2 .tips2{
  width: 100%;
  text-align: center;
  font-size: calc(20 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  color: #fff;
  padding: 0 calc(60 /1920*100vw);
  margin-top: calc(25 /1920*100vw);
}
.pop2 .btnlist{
  margin: calc(125 /1920*100vw) auto 0;
}
.pop3 .tips1{
  width: 100%;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  color: #f1de9d;
  padding: 0 calc(60 /1920*100vw);
  margin-top: calc(70 /1920*100vw);
  text-decoration: underline;
}
.pop3 .area-btnlist{
  width: 100%;
  height: calc(77 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(55 /1920*100vw);
}
.pop3 .area-btnlist a{
  display: block;
  width: calc(222 /1920*100vw);
  height: calc(77 /1920*100vw);
  text-align: center;
  line-height: calc(77 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #fff;
  margin: 0 calc(108 /1920*100vw);
  background: url(../images/btn5.png) center center no-repeat;
  background-size: 100% 100%;
}
.pop3 .area-btnlist a.on{
  background: url(../images/btn6.png) center center no-repeat;
  background-size: 100% 100%;
}
.pop3 .tips2{
  width: calc(1130 /1920*100vw);
  font-size: calc(18 /1920*100vw);
  color: #ffffff;
  line-height: calc(26 /1920*100vw);
  position: relative;
  margin: calc(45 /1920*100vw) auto 0;
}
.pop3 .tips2:before{
  display: block;
  content: "";
  width: calc(12 /1920*100vw);
  height: calc(14 /1920*100vw);
  background: url(../images/icon7.png) center center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: calc(6 /1920*100vw);
  left: calc(-20 /1920*100vw);
}
.pop3 .tips3{
  width: calc(1130 /1920*100vw);
  font-size: calc(18 /1920*100vw);
  color: #ffffff;
  line-height: calc(26 /1920*100vw);
  position: relative;
  margin: calc(15 /1920*100vw) auto 0;
}
.pop3 .tips3:before{
  display: block;
  content: "";
  width: calc(12 /1920*100vw);
  height: calc(14 /1920*100vw);
  background: url(../images/icon7.png) center center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: calc(6 /1920*100vw);
  left: calc(-20 /1920*100vw);
}
.pop3 .btnlist{
  margin: calc(60 /1920*100vw) auto 0;
}
.pop4 .infoslist{
  width: calc(1015 /1920*100vw);
  height: calc(430 /1920*100vw);
  overflow: hidden;
  margin: calc(25 /1920*100vw) auto 0;
}
.pop4 .infoslist .line{
  width: 100%;
  height: calc(35 /1920*100vw);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: calc(45 /1920*100vw);
  position: relative;
}
.pop4 .infoslist .line .tips{
  width: calc(820 /1920*100vw);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: calc(40 /1920*100vw);
  left: calc(345 /1920*100vw);
}
.pop4 .infoslist .line .tips span{
  display: block;
  font-size: calc(18 /1920*100vw);
  color: #f1de9d;
}
.pop4 .infoslist .line .tips i{
  display: block;
  width: calc(14 /1920*100vw);
  height: calc(12 /1920*100vw);
  background: url(../images/icon14.png) center center no-repeat;
  background-size: 100% 100%;
  margin-right: calc(5 /1920*100vw);
}
.pop4 .infoslist .line .label{
  display: block;
  width: calc(300 /1920*100vw);
  height: calc(35 /1920*100vw);
  background: url(../images/icon13.png) center center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: calc(35 /1920*100vw);
  font-size: calc(20 /1920*100vw);
  color: #fff;
  margin-right: calc(45 /1920*100vw);
}
.pop4 .infoslist .line input{
  display: block;
  height: calc(35 /1920*100vw);
  box-sizing: border-box;
  background: rgba(59,59,59,.37);
  border: solid calc(2 /1920*100vw) #77222c;
  outline: none;
  text-align: center;
  line-height: calc(35 /1920*100vw);
  font-size: calc(20 /1920*100vw);
  color: #fff;
}
.pop4 .infoslist .line1 input{
  width: calc(130 /1920*100vw);
}
.pop4 .infoslist .line1 span.sp1{
  display: block;
  width: calc(80 /1920*100vw);
  height: calc(35 /1920*100vw);
  text-align: center;
  line-height: calc(35 /1920*100vw);
  font-size: calc(20 /1920*100vw);
  color: #fff;
}
.pop4 .infoslist .line2 .input1{
  width: calc(220 /1920*100vw);
  margin-right: calc(18 /1920*100vw);
}
.pop4 .infoslist .line2 .input2{
  width: calc(312 /1920*100vw);
}
.pop4 .infoslist .line3 input{
  width: calc(550 /1920*100vw);
}
.pop4 .infoslist .line4 input{
  width: calc(550 /1920*100vw);
}
.pop4 .infoslist .line5 input{
  width: calc(550 /1920*100vw);
}
.pop4 .btnlist{
  height: calc(50 /1920*100vw);
}
.pop4 .btnlist a{
  width: calc(378 /1920*100vw);
  height: calc(50 /1920*100vw);
  line-height: calc(50 /1920*100vw);
  background: url(../images/btn_ok1.png) center center no-repeat;
  background-size: 100% 100%;
}
.pop5 .tips{
  width: 100%;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  color: #f1de9d;
  padding: 0 calc(60 /1920*100vw);
  margin-top: calc(155 /1920*100vw);
  box-sizing: border-box;
}
.pop5 .btnlist{
  margin: calc(155 /1920*100vw) auto 0;
}
.pop6 .rulebox{
  width: calc(1060 /1920*100vw);
  height: calc(460 /1920*100vw);
  overflow-y: auto;
  overflow-x: hidden;
  margin: calc(25 /1920*100vw) auto 0;
}
.pop6 .rulebox p{
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(20 /1920*100vw);
  font-size: calc(20 /1920*100vw);
  color: #ffffff;
  line-height: calc(36 /1920*100vw);
}
.pop7 .tips{
  width: 100%;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  color: #f1de9d;
  padding: 0 calc(60 /1920*100vw);
  margin-top: calc(155 /1920*100vw);
  box-sizing: border-box;
}
.pop7 .btnlist{
  margin: calc(155 /1920*100vw) auto 0;
}
.pop8 .myprizelist{
  width: calc(1190 /1920*100vw);
  height: calc(425 /1920*100vw);
  overflow-x: hidden;
  overflow-y: auto;
  margin: calc(40 /1920*100vw) auto 0;
}
.pop8 .myprizelist li{
  width: calc(1146 /1920*100vw);
  height: calc(94 /1920*100vw);
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 calc(20 /1920*100vw);
  position: relative;
  margin: 0 auto calc(14 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  background: rgba(80,56,41,.6);
}
.pop8 .myprizelist li p{
  font-size: calc(24 /1920*100vw);
  line-height: calc(36 /1920*100vw);
  color: #f1de9d;
}
.pop8 .myprizelist li p:first-child{
  color: #fff;
}
.pop8 .myprizelist li a{
  display: block;
  width: calc(223 /1920*100vw);
  height: calc(64 /1920*100vw);
  text-align: center;
  line-height: calc(62 /1920*100vw);
  position: absolute;
  right: calc(22 /1920*100vw);
  top: 50%;
  margin-top: calc(-32 /1920*100vw);
  font-size: calc(30 /1920*100vw);
  color: #421104;
  cursor: default;
}
.pop8 .myprizelist li a.btn-collect{
  background: url(../images/btn_collect.png) center center no-repeat;
  background-size: 100%;
  cursor: pointer;
}
.pop8 .myprizelist li a.btn-collected{
  background: url(../images/btn_collected.png) center center no-repeat;
  background-size: 100%;
}
.pop8 .myprizelist li a.btn-examine{
  background: url(../images/btn_examine.png) center center no-repeat;
  background-size: 100%;
  color: #ffb577;
}
.pop8 .tips{
  width: calc(1146 /1920*100vw);
  font-size: calc(20 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  color: #fff;
  margin: calc(10 /1920*100vw) auto 0;
}

.pop9 .prizelist{
  width: 100%;
  height: calc(270 /1920*100vw);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: calc(56 /1920*100vw);
}
.pop9 .prizelist .prizebox{
  width: calc(260 /1920*100vw);
  height: calc(177 /1920*100vw);
  background: url(../images/prizebox_bg.png) center center no-repeat;
  background-size: 100%;
  margin: 0 calc(20 /1920*100vw);
  position: relative;
}
.pop9 .prizelist .prizebox img{
  display: block;
  width: 100%;
  height: auto;
}
.pop9 .prizelist .prizebox p{
  width: 100%;
  text-align: center;
  font-size: calc(20 /1920*100vw);
  color: #ffffff;
  line-height: calc(26 /1920*100vw);
  position: absolute;
  top: calc(190 /1920*100vw);
  left: 0;
}
.pop9 .tips{
  width: 100%;
  text-align: center;
  font-size: calc(20 /1920*100vw);
  color: #f1de9d;
  line-height: calc(28 /1920*100vw);
  margin-top: calc(10 /1920*100vw);
}
.pop9 .btnlist{
  margin: calc(35 /1920*100vw) auto 0;
}

.pop10 .record-box{
  width: calc(1157 /1920*100vw);
  height: calc(417 /1920*100vw);
  overflow:hidden;
  background: url(../images/box_bg10.png) center center no-repeat;
  background-size: 100%;
  margin: calc(50 /1920*100vw) auto 0;
  position: relative;
}
.pop10 .record-box:after{
  display: block;
  content: "";
  width: calc(2 /1920*100vw);
  height: calc(417 /1920*100vw);
  background: #957554;
  position: absolute;
  left: 50%;
  margin-left: calc(-1 /1920*100vw);
  top: 0;
  z-index: 2;
  pointer-events: none;
}
.pop10 .record-box .record-title{
  width: 100%;
  height: calc(82 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop10 .record-box .record-title .td{
  width: 50%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop10 .record-box .record-title .td span{
  font-size: calc(30 /1920*100vw);
  color: #f1de9d;
  line-height: calc(36 /1920*100vw);
  text-align: center;
}
.pop10 .record-box ul{
  width: calc(1100 /1920*100vw);
  height: calc(328 /1920*100vw);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 auto;
}
.pop10 .record-box ul li{
  width: calc(1056 /1920*100vw);
  height: calc(110 /1920*100vw);
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: solid calc(2 /1920*100vw) #957554;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop10 .record-box ul li .td{
  width: 50%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop10 .record-box ul li .td span{
  font-size: calc(24 /1920*100vw);
  color: #fff;
  line-height: calc(30 /1920*100vw);
  text-align: center;
}
.pop11 .tips{
  width: 100%;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  color: #fff;
  margin-top: calc(80 /1920*100vw);
}
.pop11 .code{
  width: calc(236 /1920*100vw);
  height: calc(236 /1920*100vw);
  overflow: hidden;
  margin: calc(35 /1920*100vw) auto 0;
}
.pop11 .code img{
  display: block;
  width: 100%;
  height: auto;
}
.pop11 .tips2{
  width: 100%;
  text-align: center;
  font-size: calc(24 /1920*100vw);
  line-height: calc(30 /1920*100vw);
  color: #f1de9d;
  margin-top: calc(40 /1920*100vw);
}
.pop12{
  background: url(../images/pop1.png) center center no-repeat;
  background-size: 100%;
}
.pop12 .logo1{
  display: block;
  width: calc(1124 /1920*100vw);
  height: calc(43 /1920*100vw);
  background: url(../images/logo1.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(60 /1920*100vw);
  left: calc(55 /1920*100vw);
  pointer-events: none;
}
.pop12 .mydata{
  width: calc(914 /1920*100vw);
  height: calc(545 /1920*100vw);
  background: url(../images/box_bg11.png) center center no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: absolute;
  top: calc(65 /1920*100vw);
  left: calc(65 /1920*100vw);
}
.pop12 .mydata .details{
  width: calc(298 /1920*100vw);
  height: calc(90 /1920*100vw);
  overflow: hidden;
  position: absolute;
  top: calc(154 /1920*100vw);
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.pop12 .mydata .details p{
  width: 100%;
  text-align: center;
  font-size: calc(18 /1920*100vw);
  color: #f1de9d;
  line-height: calc(28 /1920*100vw);
}
.pop12 .mydata .details p:first-child{
  font-size: calc(36 /1920*100vw);
  color: #fff;
  line-height: calc(46 /1920*100vw);
  text-decoration: underline;
}
.pop12 .mydata ul{
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: calc(245 /1920*100vw);
  left: 0;
}
.pop12 .mydata ul li{
  width: 100%;
  height: calc(74 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop12 .mydata ul li .td1{
  width: calc(605 /1920*100vw);
}
.pop12 .mydata ul li .td2{
  width: calc(309 /1920*100vw);
}
.pop12 .mydata ul li .td{
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop12 .mydata ul li .td span{
  font-size: calc(24 /1920*100vw);
  color: #fff;
  text-align: center;
  line-height: calc(30 /1920*100vw);
}
.pop12 .code{
  width: calc(136 /1920*100vw);
  height: calc(136 /1920*100vw);
  overflow: hidden;
  position: absolute;
  left: calc(1028 /1920*100vw);
  top: calc(470 /1920*100vw);
}
.pop12 .code img{
  display: block;
  width: 100%;
  height: auto;
}
.pop12 .media-list{
  width: 100%;
  height: calc(56 /1920*100vw);
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: calc(-56 /1920*100vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pop12 .media-list .list{
  width: 50%;
  height: calc(56 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pop12 .media-list .list a{
  display: block;
  margin-right: calc(40 /1920*100vw);
}
.pop12 .media-list .x{
  width: calc(27 /1920*100vw);
  height: calc(27 /1920*100vw);
  background: url(../images/media_x.png) center center no-repeat;
  background-size: 100%;
}
/*.pop12 .media-list .facebook{
  width: calc(30 /1920*100vw);
  height: calc(30 /1920*100vw);
  background: url(../images/media_facebook.png) center center no-repeat;
  background-size: 100%;
}*/
.pop12 .media-list .line{
  width: calc(33 /1920*100vw);
  height: calc(31 /1920*100vw);
  background: url(../images/media_line.png) center center no-repeat;
  background-size: 100%;
}
/*.pop12 .media-list .reddit{
  width: calc(38 /1920*100vw);
  height: calc(32 /1920*100vw);
  background: url(../images/media_reddit.png) center center no-repeat;
  background-size: 100%;
}
.pop12 .media-list .tel{
  width: calc(31 /1920*100vw);
  height: calc(31 /1920*100vw);
  background: url(../images/media_tel.png) center center no-repeat;
  background-size: 100%;
}*/
.pop12 .media-list .dcinside{
  width: calc(40 /1920*100vw);
  height: calc(40 /1920*100vw);
  background: url(../images/media_dcinside.png) center center no-repeat;
  background-size: 100%;
  display: none;
}
.pop12 .media-list .naver{
  width: calc(40 /1920*100vw);
  height: calc(40 /1920*100vw);
  background: url(../images/media_naver.png) center center no-repeat;
  background-size: 100%;
  display: none;
}
.lang-ko .pop12 .media-list .dcinside{
  display: block;
}
.lang-ko .pop12 .media-list .naver{
  display: block;
}

.pop12 .media-list .btn-download{
  display: block;
  width: calc(40 /1920*100vw);
  height: calc(40 /1920*100vw);
  background: url(../images/download.png) center center no-repeat;
  background-size: 100%;
}
.pop12 .share-code{
  width: 100%;
  height: calc(80 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffb339;
  font-size: calc(30 /1920*100vw);
  line-height: 1;
  position: absolute;
  left: 0;
  top: calc(-80 /1920*100vw);
  text-align: center;
}
.pop13 .centercontent{
  width: 100%;
  height: calc(380 /1920*100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop13 .tips1{
  width: 100%;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  color: #f1de9d;
  padding: 0 calc(60 /1920*100vw);
}
.pop13 .btnlist{
  margin: calc(20 /1920*100vw) auto 0;
}

.pop14 .tips{
  width: 100%;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  color: #f1de9d;
  padding: 0 calc(60 /1920*100vw);
  margin-top: calc(155 /1920*100vw);
  box-sizing: border-box;
}
.pop14 .btnlist{
  margin: calc(155 /1920*100vw) auto 0;
}
.pop15 .tips{
  width: 100%;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  color: #f1de9d;
  padding: 0 calc(60 /1920*100vw);
  margin-top: calc(155 /1920*100vw);
  box-sizing: border-box;
}
.pop15 .btnlist{
  margin: calc(155 /1920*100vw) auto 0;
}
.pop16 .tips{
  width: 100%;
  text-align: center;
  font-size: calc(30 /1920*100vw);
  line-height: calc(40 /1920*100vw);
  color: #f1de9d;
  padding: 0 calc(60 /1920*100vw);
  margin-top: calc(155 /1920*100vw);
  box-sizing: border-box;
}
.pop16 .btnlist{
  margin: calc(155 /1920*100vw) auto 0;
}

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

.btn-back{
  display: none;
  width: calc(143 /1920*100vw);
  height: calc(142 /1920*100vw);
  background: url(../images/btn_back.png) center center no-repeat;
  background-size: 100%;
  position: fixed;
  top: 50%;
  margin-top: calc(-71 /1920*100vw);
  left: calc(30 /1920*100vw);
  z-index: 9;
  overflow: hidden;
}
.btn-back.on{
  display: block;
}
.btn-back p{
  width: calc(120 /1920*100vw);
  text-align: center;
  line-height: calc(24 /1920*100vw);
  font-size: calc(20 /1920*100vw);
  color: #fff;
  margin: calc(70 /1920*100vw) auto 0;
}



@-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;
}



/*poste*/
.download-poster-content{
  width: 1238px;
  height: 675px;
  overflow: hidden;
  background: url(../images/poster.jpg) center center no-repeat;
  background-size: 100%;
  position: absolute;
  top: 99999px;
  left: 0;
  z-index: -1;
}
.download-poster-content .mydata{
  width: 914px;
  height: 545px;
  background: url(../images/box_bg11.png) center center no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: absolute;
  top: 65px;
  left: 60px;
}
.download-poster-content .mydata .details{
  width: 298px;
  height: 90px;
  overflow: hidden;
  position: absolute;
  top: 154px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.download-poster-content .mydata .details p{
  width: 100%;
  text-align: center;
  font-size: 18px;
  color: #f1de9d;
  line-height: 28px;
}
.download-poster-content .mydata .details p:first-child{
  font-size: 36px;
  color: #fff;
  line-height: 46px;
  text-decoration: underline;
}
.download-poster-content .mydata ul{
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 245px;
  left: 0;
}
.download-poster-content .mydata ul li{
  width: 100%;
  height: 74px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.download-poster-content .mydata ul li .td1{
  width: 605px;
}
.download-poster-content .mydata ul li .td2{
  width: 309px;
}
.download-poster-content .mydata ul li .td{
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.download-poster-content .mydata ul li .td span{
  font-size: 24px;
  color: #fff;
  text-align: center;
  line-height: 30px;
}
.download-poster-content .code{
  width: 136px;
  height: 136px;
  overflow: hidden;
  position: absolute;
  left: 1028px;
  top: 470px;
}
.download-poster-content .code img{
  display: block;
  width: 100%;
  height: auto;
}
.dom2img-result{
  position: fixed;
  left: -99999px;
  top: 0;
  z-index: -1;
  visibility: visible;
}


.lang-ko .title8{
  display: none;
}
.lang-ko .ruledetails-btn{
  display: none;
}
.lang-ko .ruledetails-box{
  display: none;
}
.lang-zh .title8{
  display: none;
}
.lang-zh .ruledetails-btn{
  display: none;
}
.lang-zh .ruledetails-box{
  display: none;
}