@charset "utf-8";
/* public */
html,body,form,ol,ul,li,div,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,th,td,font,em,ins,span,a{margin:0; padding:0; outline: none;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;font-weight:normal}
html{_filter:expression(document.execCommand("BackgroundImageCache",false,true));}
ul,li,div,dl,dt,dd{list-style:none;}
span,a,strong,div{-webkit-appearance:none;-webkit-tap-highlight-color:transparent;}
a{text-decoration:none;}
a{blr:expression(this.onFocus=this.blur());outline:none;}
img{border:0;}
font,em{font-style:normal; font-family:\5b8b\4f53;}
label{vertical-align:middle; font-family:tahoma;}
textarea,input{resize:none; outline:none;}
ins{float:right; text-decoration:none; font-weight:normal;}
.pub_wsp{word-wrap:break-word; word-break:break-all;}
.pub_abso{vertical-align:middle;}
.pub_clr{clear:both;font-size:0;height:0;line-height:0;overflow:hidden;}
.pub_ani{-webkit-transition:0.4s;-moz-transition:0.4s;-ms-transition:0.4s;-o-transition:0.4s;transition:0.4s;}
.pub_yh{font-family:"Microsoft YaHei";}
.pub_btn{display: block; overflow: hidden; text-indent: -999px; cursor: pointer; margin: 0 auto;}
.pub_btn:hover{background-position: 0 bottom;}
.pub_le{float: left}
.pub_lr{float: right;}
.pub_ib{text-align: center; display: table; word-spacing:-1em;}
.pub_text1{display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.pub_text2{overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.pub_table{border-collapse: collapse; width: 100%;}
.none{display:none;}
*:not(input):not(textarea){user-select:none;}
body{background:#000; font-size:12px; font-family:"Microsoft YaHei",Verdana,Geneva,sans-serif,\5b8b\4f53;}
body,html{width: 100%; overflow-x: hidden;}
#content{width:100%; display: none; background:#141c41 url(../images/bg.jpg) no-repeat center 0; background-size: 100% auto; padding-bottom: 2rem;}

.logo{display: block; position: absolute; left: .3rem; top: .3rem; width: 3.86rem; height: 2.67rem; background: url(../images/logo.png) no-repeat 0 0; background-size: 100% auto; z-index: 100;}
.logokr{background: url(../images/logo_kr.png) no-repeat 0 0; background-size: 100% auto;}
.nav{width: 5.3rem; height: 1.05rem; position: absolute; right: 0; top: .36rem; z-index: 100;}
.nav .btn{cursor: pointer; width: .91rem; height: .91rem; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; float: left; margin-right: .34rem; position: relative;}
.nav .btn:last-child{margin: 0;}
.nav .home{background-image: url(../images/btn_home.png);}
.nav .rule{background-image: url(../images/btn_rule.png); width: .92rem;}
.nav .share{background-image: url(../images/btn_share.png);}
.nav .lang{background-image: url(../images/btn_lang.png); height: 1.06rem;}
.btnClick{display: block; width: 100%; height: 100%;}
.langShow{width: 1.85rem; height: 2.36rem; background: url(../images/langShow.png) no-repeat 0 0; background-size: 100% auto; position: absolute; left: 50%; transform: translate(-50%,0); top: 1.05rem; display: none;}
.langShow a{display: block; width: 100%; height: .39rem;}

.loginBefore,.loginAfter{display: none;}
.TwitchloginAfter{display: none;}
.bindAfter{display: none;}
.logoutCont{width: 4rem; height: .76rem; line-height: .76rem; background: url(../images/logout.png) no-repeat 0 0; background-size: 100% auto; position: absolute; right: .61rem; top: 1.54rem; z-index: 90;}
.logoutUser{float: left; font-size: .34rem; color: #e3eaff; width: 3.15rem; height: .76rem; text-indent: .96rem;}
.logoutBtns{float: right; cursor: pointer; width: .76rem; height: .76rem;}

.slogen{height: 16.9rem; position: relative;}
.bindBtns{width: 100%; position: absolute; left: 0; top: 14rem;}
.bind_user{display: block; margin: 0 auto; cursor: pointer;}


.bindCont{height: 17rem;}
.bindTitle{height: 3.95rem;}
.stepCont{width: 21.84rem; height: 8.97rem; margin: 0 auto; position: relative;}
.steplist{width: 6.62rem; height: 8.45rem; position: absolute; top: .31rem;}
.steplist.step1{left: .37rem;}
.steplist.step2{left: 7.63rem;}
.steplist.step3{left: 14.91rem;}
.stepBtns{padding: 3rem 0 0 0; height: 1.5rem;}
.stepBtns a{display: block; width: 4.01rem; height: .99rem; margin: 0 auto; cursor: pointer;}
.stepIcon{display: block; width: 3.39rem; height: 3.25rem; background-size: 100% auto; background-position: 0 0; background-repeat: no-repeat; margin: 0 auto;}
.stepIcon.i1{background-image: url(../images/step_icon1.png);}
.stepIcon.i2{background-image: url(../images/step_icon2.png);}
.stepIcon.i3{background-image: url(../images/step_icon3.png);}
.loginFont{text-align: center; font-size: .3rem; color: #a8a8a8; padding-top: .1rem;}

.quesCont{}
.quesTitle{height: 4rem;}
.queslist{width: 20rem; margin: 0 auto;}
.listli{padding-bottom: .5rem;}
.listli span{display: block; line-height: .8rem; margin-bottom: .2rem; background: url(../images/icon1.png) no-repeat 0 .04rem; background-size: .58rem auto; padding-left: .8rem; font-size: .6rem; font-weight: bold; color: #FFF; cursor: pointer; transition: padding-left .3s;}
.listli span.on{background: url(../images/icon2.png) no-repeat 0 .14rem; background-size: .81rem auto; padding-left: 1rem;}
.listli a,.listli a:hover{color: #0000FF; text-decoration: underline;}
.listShow{width: 17.8rem; margin: 0 auto; background: rgba(255,255,255,.3); padding: .3rem; font-size: .38rem; line-height: .6rem; color: #FFF; display: none;}



.popFiex{width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0,0,0,0.8); z-index: 100; display: none;}
.popCont{position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.pop1{width: 7.5rem; height: 4.97rem; background: url(../images/pop1.png) no-repeat 0 0; background-size: 100% auto;}
.pop2{width: 7.5rem; height: 9.45rem; background: url(../images/pop2.png) no-repeat 0 0; background-size: 100% auto;}
.closeBtn{display: block; width: .46rem; height: .46rem; background: url(../images/close.png) no-repeat 0 0; background-size: 100% auto; cursor: pointer; position: absolute; right: .3rem; top: .3rem;}

.serverCont{padding: 1.2rem 0 0 0; height: 2.1rem;}
.serverlist{height: .94rem;}
.serverlist span{float: left; width: 2.7rem; height: .64rem; line-height: .64rem; font-size: .38rem; font-weight: bold; color: #FFF; text-align: right; text-shadow:0 0 .3rem rgba(1,115,255,1); margin-right: .1rem;}
.serverlist div{float: left; width: 4rem; padding-top: .08rem;}
.serverlist select{display: block; width: 3.7rem; height: .5rem; background: #020a1b; color: #FFF; border: .02rem solid #5d97f2; font-size: .18rem; outline: none; padding: 0 .1rem;}

.popTitleCont{padding: .6rem .1rem 0 .2rem;}
.popTitle{text-align: center; font-size: .6rem; color: #FFF; font-weight: bold; padding: 0 0 .4rem 0;}

.ruleScroll{width: 6.4rem; height: 6.8rem; margin: 0 auto; overflow: hidden; overflow-y:auto; color: #FFF; font-size: .3rem; line-height: .54rem;}
.ruleScroll p{margin-bottom: .1rem;}
.ruleScroll::-webkit-scrollbar{width:.06rem;height:.06rem;background-color:rgba(0,0,0,0);}
.ruleScroll::-webkit-scrollbar-track{border-radius:.06rem;background-color:rgba(1,115,255,.5);}/*底*/
.ruleScroll::-webkit-scrollbar-thumb{border-radius:.06rem;background-color:rgba(1,115,255,1);}/*面*/
.ruleScroll::-webkit-scrollbar-thumb:hover{background-color:rgba(143,143,148,1);}
.ruleScroll::-webkit-scrollbar-thumb:active{background-color:rgba(106,106,112,1);}
.ruleScroll::-webkit-scrollbar-track-piece{margin:0;}

.shareImg{height: 4.15rem;}
.imgStyle{background: #5192f3; border-radius: .1rem; width: 6.34rem; padding: .1rem; margin: 0 auto;}
.shareImg img{display: block; width: 6.3rem; border-radius: .1rem; border: .02rem solid #0173ff; background: #151e48;}
.shareCont{display: flex; justify-content: center; height: 1.55rem;}
.shareCont a{display: block; width: 1.15rem; height: 1.15rem; cursor: pointer; margin: 0 .2rem;}
.shareCont a.share_fb{background: url(../images/share_fb.png) no-repeat 0 0; background-size: 100% auto;}
/*.shareCont a.share_x{background: url(../images/share_x.png) no-repeat 0 0; background-size: 100% auto;}*/
.sharelink{width: 5.6rem; height: .62rem; line-height: .58rem; margin: 0 auto; background: #0b213d; border-radius: .1rem; overflow: hidden;}
.sharelink span{float: left; width: 4rem; height: .62rem; color: #36b1f7; font-size: .26rem; margin-left: .1rem; text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.copyBtns{float: right; width: 1.36rem; color: #5192f3; height: .62rem; line-height: .62rem; text-align: center; color: #000; font-size: .32rem; font-weight: bold; cursor: pointer; background: #5192f3;}

.msgDiv{height: 3.2rem;}
.msg{height: 3rem; display: flex; justify-content: center; align-items: center; font-size: .46rem; line-height: .75rem; color: #FFF; font-weight: bold; padding: 0 .1rem 0 .2rem; text-align: center; padding-top: .3rem; text-shadow:0 0 .3rem rgba(1,115,255,1)}
.msg span{font-size: .5rem;}

.enterBtns{display: flex; justify-content: center;}
.enterBtns a{width: 2.96rem; height: .76rem; display: block; margin: 0 .15rem; cursor: pointer; background-position: 0 0; background-repeat: no-repeat; background-size: 100% auto;}


.index_cn .slogen{background: url(../images/cn/slogen.png) no-repeat center 9.06rem; background-size: 18.18rem auto;}
.index_cn .bindTitle{background: url(../images/cn/tit_bind.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_cn .quesTitle{background: url(../images/cn/tit_ques.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_cn .bind_user{background: url(../images/cn/bind_user.png) no-repeat 0 0; background-size: 100% auto; width: 5.58rem; height: 1.37rem;}
.index_cn .stepCont{background: url(../images/cn/step.png) no-repeat 0 0; background-size: 100% auto;}
.index_cn .btn_login{background: url(../images/cn/btn_login.png) no-repeat 0 0; background-size: 100% auto;}
.index_cn .btn_bind{background: url(../images/cn/btn_bind.png) no-repeat 0 0; background-size: 100% auto;}
.index_cn .btn_unbind{background: url(../images/cn/btn_unbind.png) no-repeat 0 0; background-size: 100% auto;}
.index_cn .btn_logout{background: url(../images/cn/btn_logout.png) no-repeat 0 0; background-size: 100% auto;}
.index_cn .enterBtns a.btn_enter{background-image: url(../images/cn/btn_enter.png);}


.index_en .slogen{background: url(../images/en/slogen.png) no-repeat center 9.06rem; background-size: 19.88rem auto;}
.index_en .bindTitle{background: url(../images/en/tit_bind.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_en .quesTitle{background: url(../images/en/tit_ques.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_en .bind_user{background: url(../images/en/bind_user.png) no-repeat 0 0; background-size: 100% auto; width: 6.19rem; height: 1.37rem;}
.index_en .stepCont{background: url(../images/en/step.png) no-repeat 0 0; background-size: 100% auto;}
.index_en .btn_login{background: url(../images/en/btn_login.png) no-repeat 0 0; background-size: 100% auto;}
.index_en .btn_bind{background: url(../images/en/btn_bind.png) no-repeat 0 0; background-size: 100% auto;}
.index_en .btn_unbind{background: url(../images/en/btn_unbind.png) no-repeat 0 0; background-size: 100% auto;}
.index_en .btn_logout{background: url(../images/en/btn_logout.png) no-repeat 0 0; background-size: 100% auto;}
.index_en .enterBtns a.btn_enter{background-image: url(../images/en/btn_enter.png);}

.index_jp .slogen{background: url(../images/jp/slogen.png) no-repeat center 9.06rem; background-size: 18.18rem auto;}
.index_jp .bindTitle{background: url(../images/jp/tit_bind.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_jp .quesTitle{background: url(../images/jp/tit_ques.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_jp .bind_user{background: url(../images/jp/bind_user.png) no-repeat 0 0; background-size: 100% auto; width: 5.12rem; height: 1.37rem;}
.index_jp .stepCont{background: url(../images/jp/step.png) no-repeat 0 0; background-size: 100% auto;}
.index_jp .btn_login{background: url(../images/jp/btn_login.png) no-repeat 0 0; background-size: 100% auto;}
.index_jp .btn_bind{background: url(../images/jp/btn_bind.png) no-repeat 0 0; background-size: 100% auto;}
.index_jp .btn_unbind{background: url(../images/jp/btn_unbind.png) no-repeat 0 0; background-size: 100% auto;}
.index_jp .btn_logout{background: url(../images/jp/btn_logout.png) no-repeat 0 0; background-size: 100% auto;}
.index_jp .enterBtns a.btn_enter{background-image: url(../images/jp/btn_enter.png);}

.index_kr .slogen{background: url(../images/kr/slogen.png) no-repeat center 9.06rem; background-size: 18.18rem auto;}
.index_kr .bindTitle{background: url(../images/kr/tit_bind.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_kr .quesTitle{background: url(../images/kr/tit_ques.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_kr .bind_user{background: url(../images/kr/bind_user.png) no-repeat 0 0; background-size: 100% auto; width: 5.12rem; height: 1.37rem;}
.index_kr .stepCont{background: url(../images/kr/step.png) no-repeat 0 0; background-size: 100% auto;}
.index_kr .btn_login{background: url(../images/kr/btn_login.png) no-repeat 0 0; background-size: 100% auto;}
.index_kr .btn_bind{background: url(../images/kr/btn_bind.png) no-repeat 0 0; background-size: 100% auto;}
.index_kr .btn_unbind{background: url(../images/kr/btn_unbind.png) no-repeat 0 0; background-size: 100% auto;}
.index_kr .btn_logout{background: url(../images/kr/btn_logout.png) no-repeat 0 0; background-size: 100% auto;}
.index_kr .enterBtns a.btn_enter{background-image: url(../images/kr/btn_enter.png);}

.index_de .slogen{background: url(../images/de/slogen.png) no-repeat center 9.06rem; background-size: 23.77rem auto;}
.index_de .bindTitle{background: url(../images/de/tit_bind.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_de .quesTitle{background: url(../images/de/tit_ques.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_de .bind_user{background: url(../images/de/bind_user.png) no-repeat 0 0; background-size: 100% auto; width: 6.19rem; height: 1.37rem;}
.index_de .stepCont{background: url(../images/de/step.png) no-repeat 0 0; background-size: 100% auto;}
.index_de .btn_login{background: url(../images/de/btn_login.png) no-repeat 0 0; background-size: 100% auto; width: 4.28rem; height: .89rem;}
.index_de .btn_bind{background: url(../images/de/btn_bind.png) no-repeat 0 0; background-size: 100% auto; width: 4.28rem; height: .89rem;}
.index_de .btn_unbind{background: url(../images/de/btn_unbind.png) no-repeat 0 0; background-size: 100% auto; width: 4.28rem; height: .89rem;}
.index_de .btn_logout{background: url(../images/de/btn_logout.png) no-repeat 0 0; background-size: 100% auto; width: 4.28rem; height: .89rem;}
.index_de .enterBtns a.btn_enter{background-image: url(../images/de/btn_enter.png);}
.index_de .sharelink span{width: 3.7rem;}
.index_de .copyBtns{width: 1.66rem;}

.index_fr .slogen{background: url(../images/fr/slogen.png) no-repeat center 9.06rem; background-size: 24.06rem auto;}
.index_fr .bindTitle{background: url(../images/fr/tit_bind.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_fr .quesTitle{background: url(../images/fr/tit_ques.png) no-repeat center 0; background-size: auto 2.8rem;}
.index_fr .bind_user{background: url(../images/fr/bind_user.png) no-repeat 0 0; background-size: 100% auto; width: 6.19rem; height: 1.37rem;}
.index_fr .stepCont{background: url(../images/fr/step.png) no-repeat 0 0; background-size: 100% auto;}
.index_fr .btn_login{background: url(../images/fr/btn_login.png) no-repeat 0 0; background-size: 100% auto; width: 4.93rem; height: .73rem;}
.index_fr .btn_bind{background: url(../images/fr/btn_bind.png) no-repeat 0 0; background-size: 100% auto; width: 4.93rem; height: .73rem;}
.index_fr .btn_unbind{background: url(../images/fr/btn_unbind.png) no-repeat 0 0; background-size: 100% auto; width: 4.93rem; height: .73rem;}
.index_fr .btn_logout{background: url(../images/fr/btn_logout.png) no-repeat 0 0; background-size: 100% auto; width: 4.93rem; height: .73rem;}
.index_fr .enterBtns a.btn_enter{background-image: url(../images/fr/btn_enter.png);}