body{ position: relative; -webkit-text-size-adjust: 100%; font-family: "Microsoft YaHei", Arial, sans-serif; font-size: .16rem;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, span, a { margin: 0; padding: 0; vertical-align: baseline;}
ul, ol { list-style: none;}
a { text-decoration: none; color: inherit; cursor: pointer; outline: none;}
a:hover{ text-decoration:none;}
img { border: 0; object-fit: cover;}
video{ object-fit: cover; }
table { border-collapse: collapse;}
area{ outline:none; }
input, textarea, select{ -webkit-appearance: none; outline: none; resize: none; border-radius: 0;}
input::-ms-clear{ display:none;}
input[type="text"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
button { border: none; background: none; cursor: pointer; font-size: inherit; white-space: nowrap;}
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;}
button:disabled{ cursor: default;}
h1.wm-public{height:0; line-height:0; font-size:0;}
.cf:after {content:"";display:block;height:0;clear:both;} 
.cf {zoom:1;}
.fl{ float: left; }
.fr{ float: right; }
.rel{ position: relative;}
.abs{ position: absolute;}
.auto{left: 50%; -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -o-transform:translate(-50%,0); transform:translate(-50%,0);}

body{ background-color: #1d1d1d;}
.wrap{ height: 12.8rem; background: url(../images/bg.jpg) no-repeat 0 0 / 100% auto; display: none;}

/* topMenu */
.topMenu{ top: .76rem; right: 1.09rem; display: flex; align-items: center; z-index: 1;}

.website{ min-width: 1.89rem; box-sizing: border-box; padding: 0 .15rem; height: .64rem; line-height: .64rem; text-align: center; font-weight: bold; font-size: .24rem; border-radius: .32rem; background: #6bdae9; color: #000;}
.shareBtn{ margin-left: .26rem; width: .64rem; height: .64rem; background: url(../images/shareBtn.png) no-repeat 0 0 / 100% auto;}
.switchLang{ margin-left: .26rem; width: 1.89rem; height: .64rem; font-size: .24rem;}
.currLang{ top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; width: 100%; height: 100%; border-radius: .32rem; background: #6bdae9; font-weight: bold; color: #000; cursor: pointer; z-index: 1;}
.currLang::before{ content: ""; margin: 0 .1rem; width: .46rem; height: .46rem; background: url(../images/icon-lang.png) no-repeat 0 0 / 100% auto;}
.chooseLanguage{ top: 0; left: 0; width: 100%; padding-top: .64rem; box-sizing: border-box; background-color: #000; border: 2px solid #2f2f2f; border-radius: .15rem; display: none;}
.chooseLanguage.open{ display: block;}
.chooseLanguage button{ display: block; width: 100%; height: .56rem; color: #dfdfdf;}
.chooseLanguage button:hover{ background-color: #6bdae9; color: #000;}

/* 主体内容 */
.content{ top: 1.63rem; left: 1.78rem; display: flex;}
.left{ width: 11.04rem; height: 11.17rem; background: url(../images/en/left.png) no-repeat 0 0 / 100% auto;}

.followUs{ width: 9.14rem; height: 8.17rem; margin: .22rem 0 0 .09rem; background: url(../images/en/followUs.png) no-repeat 0 0 / 100% auto;}
.followUs .list{ top: 2.99rem; left: .67rem; width: 7.84rem; height: 4.17rem; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
.followUs .list a{ width: 1.86rem; height: 1.86rem; margin: .08rem .04rem;}
.followUs .list a.small{ width: 1.41rem; height: 1.41rem;}
.followUs .list a.discord{ background: url(../images/discord.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.Facebook{ background: url(../images/Facebook.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.Instagram{ background: url(../images/ins.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.Kakao{ background: url(../images/Kakao.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.line{ background: url(../images/line.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.Naver{ background: url(../images/Naver.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.Reddit{ background: url(../images/Reddit.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.shequ{ background: url(../images/shequ.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.taptap{ background: url(../images/taptap.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.tiktok{ background: url(../images/tiktok.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.Twitch{ background: url(../images/twitch.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.x{ background: url(../images/x.png) no-repeat 0 0 / 100% auto;}
.followUs .list a.YouTube{ background: url(../images/YouTube.png) no-repeat 0 0 / 100% auto;}









/* 路牌 */
.guideBoard{ bottom: 1.1rem; right: .41rem; width: 2.93rem; height: 9.96rem; background: url(../images/guideBoard.png) no-repeat 0 0 / 100% auto;}

/* 弹层 */
.pop{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); display: none; z-index: 10;}
.popCont{ top: 50%; left: 50%; transform: translate(-50%, -50%);}

/* 分享弹层 */
.createShareImg{ transform: translate(100vw, 100vh); width: 1520px; height: 800px;}
.urlCode{ bottom: 23px; right: 25px; width: 172px; height: 172px;}
.urlCode canvas, .urlCode img{ width: 100%; height: 100%;}
.popShareCont{ width: 15.2rem; height: 8rem;}
.popShareCont img{ display: block; width: 100%; height: 100%;}
.popShareTip{ bottom: -.53rem; white-space: nowrap; font-weight: bold; font-size: .24rem; color: #dfdfdf;}

/* 中文 */
/* .html-cn .createShareImg{ background: url(../images/cn/share.jpg) no-repeat 0 0 / 100% auto;} */

/* 德语 */
/* .html-de .createShareImg{ background: url(../images/de/share.jpg) no-repeat 0 0 / 100% auto;} */

/* 英文 */
/* .html-en .createShareImg{ background: url(../images/en/share.jpg) no-repeat 0 0 / 100% auto;} */

/* 西班牙 */
/* .html-es .createShareImg{ background: url(../images/es/share.jpg) no-repeat 0 0 / 100% auto;} */

/* 法语 */
/* .html-fr .createShareImg{ background: url(../images/fr/share.jpg) no-repeat 0 0 / 100% auto;} */

/* 日语 */
/* .html-jp .createShareImg{ background: url(../images/jp/share.jpg) no-repeat 0 0 / 100% auto;} */
.html-jp .left{ background: url(../images/jp/left.png) no-repeat 0 0 / 100% auto;}
.html-jp .followUs{ background: url(../images/jp/followUs.png) no-repeat 0 0 / 100% auto;}

/* 韩语 */
/* .html-kr .createShareImg{ background: url(../images/kr/share.jpg) no-repeat 0 0 / 100% auto;} */
.html-kr .left{ background: url(../images/kr/left.png) no-repeat 0 0 / 100% auto;}
.html-kr .followUs{ background: url(../images/kr/followUs.png) no-repeat 0 0 / 100% auto;}

/* 俄语 */
/* .html-ru .createShareImg{ background: url(../images/ru/share.jpg) no-repeat 0 0 / 100% auto;} */


/* 移动端 */
@media screen and (max-width: 768px) {
  .wrap{ height: 14.44rem; background: url(../images/bg-m.jpg) no-repeat 0 0 / 100% auto;}
  .topMenu{ top: .44rem; right: .24rem; left: .24rem;}
  .shareBtn{ margin-left: auto;}
  .content{ top: 1.5rem; left: 0; flex-wrap: wrap;}
  .left{ width: 6.87rem; height: 6.81rem; margin: 0 auto;}
  .followUs{ width: 7.5rem; height: 6.38rem; margin: 0; margin-top: -1rem;}
  .followUs .list{ top: 2.45rem; left: .55rem; width: 6.44rem; height: 3.43rem;}
  .followUs .list a{ width: 1.45rem; height: 1.45rem; margin: .06rem;}
  .followUs .list a.small{ width: 1.16rem; height: 1.16rem;}
  .guideBoard{ display: none;}
  .popShareCont{ width: 6.96rem; height: 3.67rem;}
}