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

input {
  outline: none;
}

i {
  font-style: normal;
}

html {
  height: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-y: inherit;
}

@font-face {
  font-family: "TrajanPro";
  src: url("../fonts/TrajanPro-Regular.otf");
}

@font-face {
  font-family: "en";
  src: url("../fonts/Trajan-Regular.otf");
}

@font-face {
  font-family: "kr";
  src: url("../fonts/TT-UDShinGo1Pro-Medium.ttf");
}

@font-face {
  font-family: "jp";
  src: url("../fonts/TT-UDShinGoHangKoc-Lig.ttf");
}

.lang_jp {
  font-family: 'jp';
}

.lang_kr {
  font-family: 'kr';
}

/* body,
html,
body input,
html input {
  font-family: 'en';
} */

.font_en {
  font-family: "en";
}

/* auto_img */

.auto_img {
  display: block;
  width: 100%;
}

/* scroll */

.scrollbar::-webkit-scrollbar {
  width: calc(8 / 1920 * 100vw);
  height: 0;
  border-radius: calc(50 / 1920 * 100vw);
}

.scrollbar::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 2px #5792b3;
  -webkit-box-shadow: inset 0 0 0px #5792b3;
  background: #5792b3;
  border-radius: calc(50 / 1920 * 100vw);
  border: 1px solid #5792b3;
}

.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgb(32 84 113);
  background-color: #0a2c42;
  border-radius: calc(50 / 1920 * 100vw);
}

/* no_scroll */

.no_scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  border-radius: calc(50 / 1920 * 100vw);
}

.no_scrollbar::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 2px #293988;
  -webkit-box-shadow: inset 0 0 0px #212f4c;
  background: #ffdf76;
  border-radius: calc(50 / 1920 * 100vw);
  border: 1px solid #231b3c;
}

.no_scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  background-color: #21252c;
  border-radius: calc(50 / 1920 * 100vw);
}

::-webkit-input-placeholder {
  /*Webkit browsers*/
  font-size: calc(24 / 1920 * 100vw);
  color: rgba(242, 255, 216, 0.35);
}
:-moz-placeholder {
  /*Mozilla Firefox 4 to 8*/
  font-size: calc(24 / 1920 * 100vw);
  color: rgba(242, 255, 216, 0.35);
}
::moz-placeholder {
  /*Mozilla Firefox 19+*/
  font-size: calc(24 / 1920 * 100vw);
  color: rgba(242, 255, 216, 0.35);
}
:-ms-input-placeholder {
  /*Internet Explorer 10+*/
  font-size: calc(24 / 1920 * 100vw);
  color: rgba(242, 255, 216, 0.35);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: calc(24 / 1920 * 100vw);
  color: rgba(242, 255, 216, 0.35);
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  font-size: calc(24 / 1920 * 100vw);
  color: rgba(242, 255, 216, 0.35);
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  font-size: calc(24 / 1920 * 100vw);
  color: rgba(242, 255, 216, 0.35);
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-size: calc(24 / 1920 * 100vw);
  color: rgba(242, 255, 216, 0.35);
}

/* nav */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 2;
  background: url(../images/nav/bg.jpg) center / 100% no-repeat;
  width: 100vw;
  height: calc(138 / 1920 * 100vw);
  padding-top: calc(60 / 1920 * 100vw);
}
.nav_list {
  display: flex;
  width: calc(1500 / 1920 * 100vw);
  margin: 0 auto;
  justify-content: space-around;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav_item {
  display: block;
  width: calc(120 / 1920 * 100vw);
  text-align: center;
  line-height: calc(30 / 1920 * 100vw);
  font-size: calc(20 / 1920 * 100vw);
  text-transform: uppercase;
  color: #ffffff;
}
.lang_jp .nav_item:last-child {
  line-height: calc(22 / 1920 * 100vw);
  font-size: calc(18 / 1920 * 100vw);
}
.link_to_download {
  position: absolute;
  top: calc(53 / 1920 * 100vw);
  right: calc(42 / 1920 * 100vw);
  width: 100vw;
  z-index: 2;
  background: url(../images/link_download.png) center / 100% no-repeat;
  width: calc(133 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  /* font-size: 0; */
  line-height: calc(42 / 1920 * 100vw);
  font-size: calc(16 / 1920 * 100vw);
  text-align: center;
  color: #E0D9D0;
  text-transform: uppercase;
  display: none;
}
.logo_area {
  width: calc(530 / 1920 * 100vw);
}
.nav_item_img {
  display: block;
  width: auto;
  height: calc(20 / 1920 * 100vw);
  margin: 0 auto;
}
.btn_language {
  /* font-size: 0;
  display: block;
  background: url(../images/nav/language_tw.png) center / 100% no-repeat;
  width: calc(41 / 1920 * 100vw);
  height: calc(41 / 1920 * 100vw);
  position: absolute;
  top: calc(68 / 1920 * 100vw);
  right: calc(55 / 1920 * 100vw); */
  display: none;
}
.logo {
  background: url(../images/nav/logo_en.png) center / 100% no-repeat;
  width: calc(406 / 1920 * 100vw);
  height: calc(188 / 1920 * 100vw);
  position: absolute;
  top: calc(15 / 1920 * 100vw);
  left: 50%;
  transform: translateX(-50%);
}
.lang_jp .logo {background-image:url(../images/nav/logo_jp.png);}
.lang_kr .logo {background-image:url(../images/nav/logo_kr.png);}
/* 下载按钮 */
.download_list {
  display: flex;
  margin: calc(-30 / 1920 * 100vw) auto 0;
  width: calc(908 / 1920 * 100vw);
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.btn_download {
  display: block;
  background: url(../images/btn_ios_en.png) center / contain no-repeat;
  width: calc(268 / 1920 * 100vw);
  height: calc(73 / 1920 * 100vw);
}

.btn_ios {background-image: url(../images/btn_ios_en.png);}
.btn_google {background-image: url(../images/btn_google_en.png);}
.btn_webside {background-image: url(../images/btn_pc_en.png);}

.lang_jp .btn_ios {background-image: url(../images/btn_ios_jp.png);}
.lang_jp .btn_google {background-image: url(../images/btn_google_jp.png);}
.lang_jp .btn_webside {background-image: url(../images/btn_pc_jp.png);}

.lang_kr .btn_ios {background-image: url(../images/btn_ios_kr.png);}
.lang_kr .btn_google {background-image: url(../images/btn_google_kr.png);}
.lang_kr .btn_webside {background-image: url(../images/btn_pc_kr.png);}

.download_code_box {
  background: url(../images/download_toast.png) center / 100% no-repeat;
  width: calc(201 / 1920 * 100vw);
  height: calc(218 / 1920 * 100vw);
  position: absolute;
  padding-top: calc(34 / 1920 * 100vw);
  padding-left: calc(16 / 1920 * 100vw);
  display: none;
  top: calc(80 / 1920 * 100vw);
  z-index: 2;
}
.btn_ios.on ~ .code_box1 {
  display: block;
  left: calc(44 / 1920 * 100vw);
}
.btn_google.on ~ .code_box1 {
   display: block;
}
.btn_google.on ~ .code_box1 {
  display: block;
  left: calc(354 / 1920 * 100vw);
}

.download_code {
  background: url(../images/code.jpg) center / 100% no-repeat;
  width: calc(166 / 1920 * 100vw);
  height: calc(166 / 1920 * 100vw);
}

.btn_ios.on ~ .download_code_box .download_code {
  background: url(../images/sea_ios.png) center / 100% no-repeat;
  width: calc(166 / 1920 * 100vw);
  height: calc(166 / 1920 * 100vw);
}
.btn_google.on ~ .download_code_box .download_code {
  background: url(../images/sea_and.png) center / 100% no-repeat;
  width: calc(166 / 1920 * 100vw);
  height: calc(166 / 1920 * 100vw);
}
.download_code_ios {
  background: url(../images/sea_ios.png) center / 100% no-repeat;
  width: calc(166 / 1920 * 100vw);
  height: calc(166 / 1920 * 100vw);
}
.download_code_gp {
  background: url(../images/sea_and.png) center / 100% no-repeat;
  width: calc(166 / 1920 * 100vw);
  height: calc(166 / 1920 * 100vw);
}
.bottom_code_ios {
  background: url(../images/sea_ios.png) center / 100% no-repeat;
  width: calc(166 / 1920 * 100vw);
  height: calc(166 / 1920 * 100vw);
}
.bottom_code_gp {
  background: url(../images/sea_and.png) center / 100% no-repeat;
  width: calc(166 / 1920 * 100vw);
  height: calc(166 / 1920 * 100vw);
}

/* 底部下载 */
.bottom_tips_panel .code_box2 {
  background: url(../images/download_toast1.png) center / 100% no-repeat;
  top: calc(-226 / 1920 * 100vw);
  padding-top: calc(20 / 1920 * 100vw);
  padding-left: calc(16 / 1920 * 100vw);
}
.bottom_tips_panel .btn_ios.on ~ .code_box2 {
  display: block;
  left: calc(14 / 1920 * 100vw);
}
.bottom_tips_panel .btn_google.on ~ .code_box2 {
  display: block;
  left: calc(297 / 1920 * 100vw);
}

/* bottom */
.bottom_tips_panel {
  position: fixed;
  bottom: calc(-10 / 1920 * 100vw);
  width: 100vw;
  background: url(../images/bottom_bg.png) center / 100% no-repeat;
  height: calc(135 / 1920 * 100vw);
  z-index: 1;
  left: 0;
  display: flex;
  justify-content: center;
  transition: bottom 0.66s linear;
}

.bottom_tips_panel.hide {
  /* display: none; */
  bottom: calc(-140 / 1920 * 100vw);
}
.bottom_tips_panel::after {
  content: "";
  position: absolute;
  background: url(../images/prop13.png) center / 100% no-repeat;
  width: calc(198 / 1920 * 100vw);
  height: calc(162 / 1920 * 100vw);
  left: calc(162 / 1920 * 100vw);
  bottom: 0;
  pointer-events: none;
}
.bottom_title {
  background: url(../images/bottom_title.png) center / 100% no-repeat;
  width: calc(468 / 1920 * 100vw);
  height: calc(35 / 1920 * 100vw);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.bottom_download_box {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  height: calc(70 / 1920 * 100vw);
  margin-left: calc(20 / 1920 * 100vw);
}

/* footer */

.footer {
  height: calc(350 / 1920 * 100vw);
  padding-top: calc(80 / 1920 * 100vw);
}

.news_inner1 .footer {
  padding-top: 0;
}

.home .footer {
  height: calc(600 / 1920 * 100vw);
}

.faqs .footer {
  height: calc(440 / 1920 * 100vw);
}

.footer_link_list {
  display: flex;
  justify-content: center;
  background: url(../images/link_line.png) center / 100% no-repeat;
}

.footer_link_item {
  font-size: 0;
  display: block;
  background: url(../images/link_facebook.png) center / 100% no-repeat;
  height: calc(100 / 1920 * 100vw);
  width: calc(100 / 1920 * 100vw);
  margin-right: calc(55 / 1920 * 100vw);
}

.footer_link_item:last-child {
  margin-right: 0;
}

.link_facebook {
  background-image: url(../images/link_facebook.png);
}
.link_discord {
  background-image: url(../images/link_discord.png);
}
.link_twitter {
  background-image: url(../images/link_twitter.png);
}
.link_youtube {
  background-image: url(../images/link_youtube.png);
}
.link_tiktok {
  background-image: url(../images/link_tiktok.png);
}
.link_instagram {
  background-image: url(../images/link_instagram.png);
}
.link_lounge {
  background-image: url(../images/link_lounge.png);
}

.footer_page_list {
  padding-top: calc(30 / 1920 * 100vw);
  text-align: center;
  padding-bottom: calc(27 / 1920 * 100vw);
}

.level_logo{
  display: block;
  width: calc(156 / 1920 * 100vw);
  height: calc(86 / 1920 * 100vw);
  background: url(../images/level_logo.png) center / 100% no-repeat;
  margin: calc(50 / 1920 * 100vw) auto 0;
}

.home .footer_page_list {
  padding-top: calc(60 / 1920 * 100vw);
}

.footer_page_item {
  line-height: calc(22 / 1920 * 100vw);
  margin-right: calc(55 / 1920 * 100vw);
  position: relative;
  color: #ffffff;
  font-size: calc(21 / 1920 * 100vw);
}

.footer_page_item::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(-27 / 1920 * 100vw);
  width: 1px;
  height: 100%;
  background-color: #ffffff;
}

.footer_page_item:last-child {
  margin-right: 0;
}

.footer_page_item:last-child::after {
  display: none;
}

.copyright {
  line-height: calc(22 / 1920 * 100vw);
  color: #ffffff;
  font-size: calc(21 / 1920 * 100vw);
  text-align: center;
}

.footer_tw {
  display: flex;
  justify-content: center;
  margin: calc(95 / 1920 * 100vw) auto;
  width: calc(1237 / 1920 * 100vw);
  color: #ffffff;
}

.footer_panel_left {
  width: calc(440 / 1920 * 100vw);
  font-size: calc(16 / 1920 * 100vw);
  line-height: calc(29 / 1920 * 100vw);
  text-align: center;
  position: relative;
}

.footer_panel_left::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.5);
}

.footer_logo {
  width: calc(259 / 1920 * 100vw);
  display: block;
  margin: 0 auto calc(30 / 1920 * 100vw);
}

.footer_panel_right {
  font-size: calc(14 / 1920 * 100vw);
  line-height: calc(27 / 1920 * 100vw);
  position: relative;
  padding-top: calc(30 / 1920 * 100vw);
  padding: calc(30 / 1920 * 100vw) calc(60 / 1920 * 100vw) 0;
}

.footer_icon {
  position: absolute;
  top: calc(-34 / 1920 * 100vw);
  right: calc(10 / 1920 * 100vw);
  width: calc(34 / 1920 * 100vw);
  display: block;
}


/* new download */
.download_cell {
    background: url(../images/download_cell.png) center / 100% no-repeat;
    width: calc(576 / 1920 * 100vw);
    height: calc(171 / 1920 * 100vw);
    position: relative;
    margin: 0 auto;
    padding: calc(16 / 1920 * 100vw) calc(24 / 1920 * 100vw) 0;
    display: flex;
    justify-content: space-between;
}
.qr_code {
  background: url(../images/download_code.png) center / 100% no-repeat;
  width: calc(135 / 1920 * 100vw);
  height: calc(135 / 1920 * 100vw);
  padding-top: calc(10 / 1920 * 100vw);
}
.qr_code_img {
  background: url(../images/union_qr.jpg) center / contain no-repeat;
  width: calc(85 / 1920 * 100vw);
  height: calc(85 / 1920 * 100vw);
  margin: 0 auto;
}
.qr_code_img:hover {
/*   transform: scale(2); */
}
.qr_code_tips {
  display: none;
}
.download_app {
  background: url(../images/download_app.png) center / 100% no-repeat;
  width: calc(234 / 1920 * 100vw);
  height: calc(135 / 1920 * 100vw);
}
.download_pc {
  background: url(../images/download_pc.png) center / 100% no-repeat;
  width: calc(135 / 1920 * 100vw);
  height: calc(136 / 1920 * 100vw);
}
.sea_google{
  width: calc(234 / 1920 * 100vw);
  height: calc(64 / 1920 * 100vw);
  margin-bottom: calc(8 / 1920 * 100vw);
  float: left;
}
.sea_ios{
  width: calc(234 / 1920 * 100vw);
  height: calc(64 / 1920 * 100vw);
  float: left;
}

/* back */
.btn_return {
  display: block;
  background: url(../images/inner/btn_prev.png) center bottom / 100% no-repeat;
  width: calc(156 / 1920 * 100vw);
  height: calc(62 / 1920 * 100vw);
  line-height: calc(62 / 1920 * 100vw);
  /* color: #b5bcc5; */
  color: #ffffff;
  font-size: calc(25 / 1920 * 100vw);
  text-transform: uppercase;
  font-family: "TrajanPro";
  font-weight: 900;
  text-align: right;
  margin-bottom: calc(20 / 1920 * 100vw);
}