@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: #ffffff;
}

i {
  font-style: normal;
}

body {
}

html {
}

body,
html {
  background: #000;
  color: #ffffff;
  position: relative;
}

.wrapper {
  position: relative;
  /*overflow-y: hidden;*/
  /*overflow-x: hidden;*/
}

.sec {
  display: block;
  position: relative;
  z-index: 1;
  /* height: 59vw; */
}

.sec_content {
  margin: 0 auto;
  background: center / contain no-repeat;
  width: calc(1133 / 1920 * 100vw);
}

@media screen and (min-aspect-ratio: 3/2) {
}

.sec_title {
  margin: 0 auto;
  background: url(../images/sec_title2.png) center bottom / 100% no-repeat;
  padding-top: calc(50 / 1920 * 100vw);
  box-sizing: content-box;
}

.s2 .sec_title {
  background-image: url(../images/sec_title2_en.png);
  width: calc(866 / 1920 * 100vw);
  height: calc(152 / 1920 * 100vw);
  margin-bottom: calc(15 / 1920 * 100vw);
  padding-top: 0;
}

.lang_jp .s2 .sec_title {
  background-image: url(../images/sec_title2_jp.png);
  margin-bottom: calc(-15 / 1920 * 100vw);
}

.lang_kr .s2 .sec_title {
  background-image: url(../images/sec_title2_kr.png);
  margin-bottom: calc(-15 / 1920 * 100vw);
}

/* .s5 .sec_title {
  background-image: url(../images/sec_title5_en.png);
  width: calc(1096 / 1920 * 100vw);
  height: calc(40 / 1920 * 100vw);
} */
.s5 .sec_title {
  background: url(../images/sec_title5_en.png) center bottom / auto calc(42 / 1920 * 100vw) no-repeat;
  width: calc(1022 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  position: relative;
}

.lang_jp .s5 .sec_title {
  background-image: url(../images/sec_title5_jp.png);
  width: calc(556 / 1920 * 100vw);
}

.lang_kr .s5 .sec_title {
  background-image: url(../images/sec_title5_kr.png);
  width: calc(515 / 1920 * 100vw);
}

.s5 .sec_title::before,
.s5 .sec_title::after {
  content: "";
  background: url(../images/sec_title_icon.png) center / 100% no-repeat;
  width: calc(50 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  position: absolute;
  bottom: 0;
}

.s5 .sec_title::before {
  left: calc(100% + 40 / 1920 * 100vw);
  transform: rotate(0.5turn);
}

.s5 .sec_title::after {
  right: calc(100% + 40 / 1920 * 100vw);
}

/* .s6 .sec_title {
  background-image: url(../images/sec_title6_en.png);
  width: calc(640 / 1920 * 100vw);
  height: calc(58 / 1920 * 100vw);
  z-index: 2;
  position: relative;
} */


.s6 .sec_title {
  background: url(../images/sec_title6_en.png) center bottom / auto calc(42 / 1920 * 100vw) no-repeat;
  width: calc(910 / 1920 * 100vw);
  height: calc(51 / 1920 * 100vw);
  position: relative;
}

.lang_jp .s6 .sec_title {
  background-image: url(../images/sec_title6_jp.png);
  width: calc(225/ 1920 * 100vw);
}

.lang_kr .s6 .sec_title {
  background-image: url(../images/sec_title6_kr.png);
  width: calc(249 / 1920 * 100vw);
}

.s6 .sec_title::before,
.s6 .sec_title::after {
  content: "";
  background: url(../images/sec_title_icon1.png) center / 100% no-repeat;
  width: calc(50 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  position: absolute;
  bottom: 0;
}

.s6 .sec_title::before {
  left: calc(100% + 40 / 1920 * 100vw);
  transform: rotate(0.5turn);
}

.s6 .sec_title::after {
  right: calc(100% + 40 / 1920 * 100vw);
}

/* .s7 .sec_title {
  background-image: url(../images/sec_title7_en.png);
  width: calc(751 / 1920 * 100vw);
  height: calc(58 / 1920 * 100vw);
} */

.s8 .sec_title {
  background: url(../images/sec_title8_en.png) center bottom / auto calc(42 / 1920 * 100vw) no-repeat;
  width: calc(158 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  position: relative;
}

.lang_jp .s8 .sec_title {
  background-image: url(../images/sec_title8_jp.png);
  width: calc(180 / 1920 * 100vw);
}

.lang_kr .s8 .sec_title {
  background-image: url(../images/sec_title8_kr.png);
  width: calc(94 / 1920 * 100vw);
}

.s8 .sec_title::before,
.s8 .sec_title::after {
  content: "";
  background: url(../images/sec_title_icon.png) center / 100% no-repeat;
  width: calc(50 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  position: absolute;
  bottom: 0;
}

.s8 .sec_title::before {
  left: calc(100% + 40 / 1920 * 100vw);
  transform: rotate(0.5turn);
}

.s8 .sec_title::after {
  right: calc(100% + 40 / 1920 * 100vw);
}

/* .s9 .sec_title {
  background-image: url(../images/sec_title9_en.png);
  width: calc(796 / 1920 * 100vw);
  height: calc(40 / 1920 * 100vw);
} */

.s9 .sec_title {
  background: url(../images/sec_title9_en.png) center bottom / auto calc(50 / 1920 * 100vw) no-repeat;
  width: calc(598 / 1920 * 100vw);
  height: calc(50 / 1920 * 100vw);
  position: relative;
}

.lang_jp .s9 .sec_title {
  background-image: url(../images/sec_title9_jp.png);
  width: calc(310 / 1920 * 100vw);
}

.lang_kr .s9 .sec_title {
  background-image: url(../images/sec_title9_kr.png);
  width: calc(334 / 1920 * 100vw);
}

.s9 .sec_title::before,
.s9 .sec_title::after {
  content: "";
  background: url(../images/sec_title_icon.png) center / 100% no-repeat;
  width: calc(50 / 1920 * 100vw);
  height: calc(60 / 1920 * 100vw);
  position: absolute;
  bottom: 0;
}

.s9 .sec_title::before {
  left: calc(100% + 40 / 1920 * 100vw);
  transform: rotate(0.5turn);
}

.s9 .sec_title::after {
  right: calc(100% + 40 / 1920 * 100vw);
}

/* 
.s10 .sec_title {
  background-image: url(../images/sec_title10_en.png);
  width: calc(516 / 1920 * 100vw);
  height: calc(40 / 1920 * 100vw);
}
.s10 .sec_title.on {
  background-image: url(../images/sec_title10_m.png);
} */

.s10 .sec_title {
  background: url(../images/sec_title10_en.png) center bottom / auto calc(50 / 1920 * 100vw) no-repeat;
  width: calc(338 / 1920 * 100vw);
  height: calc(50 / 1920 * 100vw);
  position: relative;
}
.s10 .sec_title.on {
  display: none;
} 

.lang_jp .s10 .sec_title {
  background-image: url(../images/sec_title10_jp.png);
  width: calc(400 / 1920 * 100vw);
}

.lang_kr .s10 .sec_title {
  background-image: url(../images/sec_title10_kr.png);
  width: calc(544 / 1920 * 100vw);
}

.s10 .sec_title::before,
.s10 .sec_title::after {
  content: "";
  background: url(../images/sec_title_icon.png) center / 100% no-repeat;
  width: calc(50 / 1920 * 100vw);
  height: calc(60 / 1920 * 100vw);
  position: absolute;
  bottom: 0;
}

.s10 .sec_title::before {
  left: calc(100% + 40 / 1920 * 100vw);
  transform: rotate(0.5turn);
}

.s10 .sec_title::after {
  right: calc(100% + 40 / 1920 * 100vw);
}

/* right_nav */

.right_nav {
  position: fixed;
  top: 50%;
  right: calc(47 / 1920 * 100vw);
  transform: translateY(-50%);
  background: url(../images/right_nav.png) center / 100% no-repeat;
  width: calc(174 / 1920 * 100vw);
  height: calc(578 / 1920 * 100vw);
  z-index: 1;
  padding-top: calc(158 / 1920 * 100vw);
  text-align: center;
  text-transform: uppercase;
}

.right_nav::after {
  content: "";
  position: absolute;
  left: calc(-32 / 1920 * 100vw);
  top: calc(444 / 1920 * 100vw);
  width: calc(250 / 1920 * 100vw);
  height: calc(130 / 1920 * 100vw);
  background: url(../images/right_nav_cover.png) center / 100% no-repeat;
}

.right_nav_download {
  position: absolute;
  top: calc(89 / 1920 * 100vw);
  left: 50%;
  transform: translateX(-50%);
  /* font-size: 0; */
  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);
  color: #E0D9D0;
}

.right_link_list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  display: flex;
  font-size: 0;
  padding-top: calc(20 / 1920 * 100vw);
}

.right_link_item {
  display: block;
  margin: 0 calc(12 / 1920 * 100vw);
  width: calc(49 / 1920 * 100vw);
  height: calc(49 / 1920 * 100vw);
  background: url(../images/link_facebook.png) center / 100% no-repeat;
}

.link_facebook {
}

.link_discord {
  background-image: url(../images/link_discord.png);
}

.right_nav_list {
}

.right_nav_item {
  width: calc(173 / 1920 * 100vw);
  height: calc(43 / 1920 * 100vw);
  line-height: calc(43 / 1920 * 100vw);
  font-size: calc(16 / 1920 * 100vw);
  color: #ffffff;
  display: block;
}

.lang_jp .right_nav_item:last-child {
  padding: 0 calc(30 / 1920 * 100vw);
  line-height: calc(20 / 1920 * 100vw);
  font-size: calc(16 / 1920 * 100vw);
  padding-top: calc(12 / 1920 * 100vw);
}

.right_nav_item:hover {
  background: url(../images/right_nav_on.png) center / 100% 100% no-repeat;
  text-shadow: 0 0 calc(10 / 1920 * 100vw) #ffe3ba;
}

.right_nav_item span {
  padding-right: calc(20 / 1920 * 100vw);
  display: inline-block;
  position: relative;
}

.right_nav_item span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/nav_top.png) center / 100% no-repeat;
  height: 100%;
  width: calc(12 / 1920 * 100vw);
}

/* s1 faqs通用*/

.s1 {
  width: 100%;
  height: calc(1117 / 1920 * 100vw);
  position: relative;
  overflow: initial;
  padding-top: calc(550 / 1920 * 100vw);
  z-index: 2;
}

#link_s1 {
  position: absolute;
  top: 0;
}

.s1::after {
  content: "";
  position: absolute;
  top: calc(88 / 1920 * 100vw);
  left: 0;
  background: url(../images/nav/shadow.png) center / 100% no-repeat;
  width: 100%;
  height: calc(210 / 1920 * 100vw);
  z-index: 0;
  pointer-events: none;
}

.kv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: url(../images/kv20221205.jpg) center / cover no-repeat;
  height: calc(1117 / 1920 * 100vw);
  overflow: initial;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url(../images/kv_cover.png);
  -webkit-mask-position: center center;
  padding-top: calc(520 / 1920 * 100vw);
  z-index: 0;
  pointer-events: none;
}

.lang_en .kv {background-image: url(../images/kv20221205.jpg);}
.lang_jp .kv {background-image: url(../images/kv20221205.jpg);}
.lang_kr .kv {background-image: url(../images/kv20221205.jpg);}

.slogan {
  background: url(../images/slogan20221205.png) top no-repeat;
  width: calc(920 / 1920 * 100vw);
  height: calc(200 / 1920 * 100vw);
  background-size: calc(920 / 1920 * 100vw) calc(200 / 1920 * 100vw);
  margin: 0 auto;
  z-index: 1;
  top:calc(86 / 1920 * 100vw);
  position: relative;
}

.lang_jp .slogan {background-image: url(../images/slogan20221205.png);}
.lang_kr .slogan {background-image: url(../images/slogan20221205.png);}

.slogan::after {
  content: "";
  display:none;
  position: absolute;
  background: url(../images/headline_en.png) center / 60% no-repeat;
  width: calc(958 / 1920 * 100vw);
  height: calc(146 / 1920 * 100vw);
  z-index: 1;
  top: calc(160 / 1920 * 100vw);
  left: 50%;
  margin-left: calc(-479 / 1920 * 100vw);
  pointer-events: none;
}

.lang_jp .slogan::after {background-image: url(../images/headline_jp.png);
  top: calc(170 / 1920 * 100vw);
}
.lang_kr .slogan::after {background-image: url(../images/headline_kr.png);
  top: calc(160 / 1920 * 100vw);
}

.getNow{
  display: block;
  margin: 0 auto;
  top: calc(212 / 1920 * 100vw);
  left: calc(-11 / 1920 * 100vw);
  width: calc(270 / 1920 * 100vw);
  height: calc(103 / 1920 * 100vw);
  z-index: 1;
  position: relative;
  background: url(../images/btn_get_en.png) center / 100% no-repeat;
}
.lang_jp .getNow {background: url(../images/btn_get_jp.png) center / 100% no-repeat;}
.lang_kr .getNow {background: url(../images/btn_get_kr.png) center / 100% no-repeat;}

.kv_detail {
  width: calc(886 / 1920 * 100vw);
  margin: 0 auto;
  height: calc(87 / 1920 * 100vw);
  text-align: center;
  color: rgb(255 255 255);
  font-size: calc(22 / 1920 * 100vw);
  line-height: calc(30 / 1920 * 100vw);
  padding-top: calc(17 / 1920 * 100vw);
  margin-top: calc(35 / 1920 * 100vw);
  position: relative;
  z-index: 1;
  background: url(../images/kv_detail.png) center / 100% no-repeat;
  font-family: "TrajanPro";
  text-transform: none;
  display: none;
}

.nav_language {
    display: block;
    position: absolute;
    top: calc(184 / 1920 * 100vw);
    right: calc(30 / 1920 * 100vw);
    width: calc(42 / 1920 * 100vw);
    height: calc(42 / 1920 * 100vw);
    background: url(../images/nav_language.png) center / 100% no-repeat;
    z-index: 1;
}

.multi_language {
    position: absolute;
    top: calc(234 / 1920 * 100vw);
    right: calc(48 / 1920 * 100vw);
    background: rgba(14, 21, 34, 0.7);
    padding: calc(10 / 1920 * 100vw);
    display: none;
    transform: translateX(50%);
}

.multi_language.on {
  display: block;
}

.multi_language a {
    color: #ffffff;
    height: calc(36 / 1920 * 100vw);
    line-height: calc(36 / 1920 * 100vw);
    text-align: center;
    font-size: calc(14 / 1920 * 100vw);
    display: block;
}

/* 下载 - 结束 */


/* 新官网下载开始 */

.justify {
    display: flex;
    justify-content: center;
}

.top-btn-download {
    /* background: url(../images/download-bg.png) no-repeat 50% 0;
    background-size: 100% auto; */
    width: calc(860 / 1920 * 100vw);
    height: calc(74 / 1920 * 100vw);
    position: absolute;
    top: calc(885 / 1920 * 100vw);
    left: 50%;
    margin-left: calc(-430 / 1920 * 100vw);
    z-index: 5;
}

.top-btn-download a {
    width: calc(269 / 1920 * 100vw);
    height: calc(80 / 1920 * 100vw);
    display: block;
    text-indent: -9999px;
    margin: 0 calc(20 / 1920 * 100vw);
}

.btn-app-store {
    background: url(../images/appstore-bg.png) no-repeat 50% 0;
    background-size: 100% auto;
}

.btn-google-play {
    background: url(../images/google-play-bg.png) no-repeat 50% 0;
    background-size: 100% auto;
}

.btn-steam {
    background: url(../images/steam-bg.png) no-repeat 50% 0;
    background-size: 100% auto;
}
.top-btn-download .btn-pc-down {
    width: calc(296 / 1920 * 100vw);
    height: calc(80 / 1920 * 100vw);
    background: url(../images/btn_pc_en.png) no-repeat 50% 0;
    background-size: 100% auto;
}
.lang_en .top-btn-download .btn-pc-down{
    background: url(../images/btn_pc_en.png) no-repeat 50% 0;
    background-size: 100% auto;
}
.lang_jp .top-btn-download .btn-pc-down{
    background: url(../images/btn_pc_jp.png) no-repeat 50% 0;
    background-size: 100% auto;
}
.lang_kr .top-btn-download .btn-pc-down{
    display: none;
    background: url(../images/btn_pc_kr.png) no-repeat 50% 0;
    background-size: 100% auto;
}
.lang_kr .top-btn-download .btn-steam {display: none;}

.top-btn-download a:hover {
    opacity: 0.8;
}


/* 新官网下载结束 */

.link_list {
  display: flex;
  position: absolute;
  top: calc(170 / 1920 * 100vw);
  right: calc(102 / 1920 * 100vw);
  z-index: 11111111;
}

.link_item {
  font-size: 0;
  display: block;
  width: calc(66 / 1920 * 100vw);
  height: calc(66 / 1920 * 100vw);
  background: url(../images/kv_link_discord.png) center / 100% no-repeat;
  border-radius: 50%;
  margin-left: calc(30 / 1920 * 100vw);
  display: none;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  overflow: hidden;
}

.kv_link_facebook {background-image: url(../images/link_facebook.png);}
.kv_link_discord {background-image: url(../images/link_discord.png);}
.kv_link_twitter {background-image: url(../images/link_twitter.png);}
.kv_link_naver {background-image: url(../images/link_lounge.png);}

.lang_en .kv_link_en {display: block;}
.lang_jp .kv_link_jp {display: block;}
.lang_kr .kv_link_kr {display: block;}

/* s2 */

.s2 {
  padding-top: calc(106 / 1920 * 100vw);
  height: calc(1065 / 1920 * 100vw);
  box-sizing: content-box;
}

.s2_detail {
  margin: 0 auto;
  text-align: center;
  color: rgba(144, 169, 200, 0.6);
  font-size: calc(26 / 1920 * 100vw);
  line-height: calc(44 / 1920 * 100vw);
  padding: 0 calc(550 / 1920 * 100vw);
}

/* s8 */

.s8 {
  height: calc(770 / 1920 * 100vw);
}

.s8_detail {
  width: calc(1240 / 1920 * 100vw);
  margin: 0 auto;
  margin-top: calc(73 / 1920 * 100vw);
  position: relative;
}
.swiper_banner {
  width: calc(620 / 1920 * 100vw);
  height: calc(370 / 1920 * 100vw);
  position: absolute;
  top: 0;
  left: 0;
}
.swiper_banner::after {
  content: "";
  background: url(../images/banner_cover.png) center / 100% no-repeat;
  width: calc(620 / 1920 * 100vw);
  height: calc(319 / 1920 * 100vw);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.banner_img {
  background: url(../images/s8_slide1.jpg) center / cover no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url(../images/banner_mask.png);
  -webkit-mask-position: center center;
  -webkit-mask-size: 100% 100%;
  width: calc(620 / 1920 * 100vw);
  height: calc(319 / 1920 * 100vw);
  display: block;
}

.swiper_banner .swiper-pagination {
}

.swiper_banner .swiper-pagination::before,
.swiper_banner .swiper-pagination::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  background: url(../images/s7_tab_icon1.png) center / 100% no-repeat;
  width: calc(28 / 1920 * 100vw);
}

.swiper_banner .swiper-pagination::before {
  right: 100%;
}

.swiper_banner .swiper-pagination::after {
  left: 100%;
  background-image: url(../images/s7_tab_icon2.png);
}

.swiper_banner.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: calc(10 / 1920 * 100vw);
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-evenly;
  filter: drop-shadow(0 0 0.2vw rgba(0, 0, 0, 0.4));
  padding: 0 calc(15 / 1920 * 100vw);
}
.swiper_banner .swiper-pagination-bullet {
  border-radius: 0;
  background: unset;
  opacity: 1;
  background: url(../images/s7_tab_off.png) center / 100% no-repeat;
  width: calc(15 / 1920 * 100vw);
  height: calc(15 / 1920 * 100vw);
  margin: 0 calc(5 / 1920 * 100vw) !important;
  display: block;
}
.swiper_banner .swiper-pagination-bullet-active {
  background-color: unset;
  background-image: url(../images/s7_tab_on.png);
}
.swiper_banner
  .swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 4px;
}

.news_panel {
  background: url(../images/news_panel.png) bottom right /
    calc(998 / 1920 * 100vw) no-repeat;
  height: calc(347 / 1920 * 100vw);
  padding-top: calc(74 / 1920 * 100vw);
  box-sizing: content-box;
  position: relative;
}
.news_nav {
  position: absolute;
  top: calc(12 / 1920 * 100vw);
  right: calc(50 / 1920 * 100vw);
  display: flex;
  width: calc(525 / 1920 * 100vw);
  justify-content: space-between;
  font-size: calc(22 / 1920 * 100vw);
}
.news_nav_item {
  padding: 0 calc(8 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  line-height: calc(42 / 1920 * 100vw);
  color: #7e8fb0;
  font-family: "TrajanPro";
  font-weight: 900;
  display: block;
}
.news_nav_item.on {
  background: url(../images/news_nav.png) center bottom / 100%
    calc(4 / 1920 * 100vw) no-repeat;
  color: #eef0f3;
}
.news_list {
  width: calc(525 / 1920 * 100vw);
  position: absolute;
  right: calc(50 / 1920 * 100vw);
  padding-top: calc(48 / 1920 * 100vw);
}
.news_link_item {
  height: calc(62 / 1920 * 100vw);
  font-size: calc(17 / 1920 * 100vw);
  position: relative;
  display: block;
  padding-right: calc(150 / 1920 * 100vw);
  line-height: calc(62 / 1920 * 100vw);
  border-bottom: 1px solid rgba(154, 165, 193, 0.13);
}
.news_link_item:last-child {
  border: none;
}
.news_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
}
.news_time {
  position: absolute;
  right: 0;
  top: 0;
  color: #7e8fb0;
}
.btn_news_more {
  display: block;
  position: absolute;
  background: url(../images/btn_more.png) center bottom / 100% no-repeat;
  width: calc(156 / 1920 * 100vw);
  height: calc(62 / 1920 * 100vw);
  line-height: calc(62 / 1920 * 100vw);
  color: #b5bcc5;
  font-size: calc(25 / 1920 * 100vw);
  text-transform: uppercase;
  right: 0;
  font-family: "TrajanPro";
  font-weight: 900;
  top: calc(433 / 1920 * 100vw);
}

/* s5 */

.s5 {
  height: calc(1130 / 1920 * 100vw);
}

.s5_swiper {
  margin-top: calc(97 / 1920 * 100vw);
  width: calc(1064 / 1920 * 100vw);
  height: calc(868 / 1920 * 100vw);
}

.video_box {
  background: url(../images/s5_slide1_en.png) center / 100% no-repeat;
  width: calc(1064 / 1920 * 100vw);
  height: calc(548 / 1920 * 100vw);
  position: relative;
}

.lang_en .slide1 .video_box {background-image: url(../images/s5_slide1_en.png);}
.lang_jp .slide1 .video_box {background-image: url(../images/s5_slide1_jp.png);}
.lang_kr .slide1 .video_box {background-image: url(../images/s5_slide1_kr.png);}
.slide2 .video_box {background-image: url(../images/s5_slide2.png);}
.slide3 .video_box {background-image: url(../images/s5_slide3.png);}
.slide4 .video_box {background-image: url(../images/s5_slide4.png);}
.slide5 .video_box {background-image: url(../images/s5_slide5.png);}
.slide6 .video_box {background-image: url(../images/s5_slide6.png);}

.s5_player {
  display: block;
  background: url(../images/s5_player.png) center / 100% no-repeat;
  width: calc(111 / 1920 * 100vw);
  height: calc(109 / 1920 * 100vw);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lock .s5_player {
  pointer-events: none;
  background-image: url(../images/s5_lock.png);
}

.video_title {
  background: url(../images/s5_video_title.png) center left / auto 80% no-repeat;
  width: 100%;
  height: calc(40 / 1920 * 100vw);
  margin-top: calc(66 / 1920 * 100vw);
  margin-bottom: calc(30 / 1920 * 100vw);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
}



.video_title {
    background: center left / auto calc(47 / 1920 * 100vw) no-repeat;
    width: 100%;
    height: calc(47 / 1920 * 100vw);
    margin-top: calc(66 / 1920 * 100vw);
    margin-bottom: calc(30 / 1920 * 100vw);
    -webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

.lang_en .video_title {
    background: center left / auto calc(33 / 1920 * 100vw) no-repeat;
    height: calc(33 / 1920 * 100vw);
}

.lang_jp .video_title,
.lang_kr .video_title {
    background: center left / auto calc(60 / 1920 * 100vw) no-repeat;
    height: calc(60 / 1920 * 100vw);
    margin-left: calc(-26 / 1920 * 100vw);
    margin-bottom: calc(10 / 1920 * 100vw);
}

.lang_en .slide1 .video_title {background-image: url(../images/s5_video_title1_en.png);}
.lang_en .slide2 .video_title {background-image: url(../images/s5_video_title2_en.png);}
.lang_en .slide3 .video_title {background-image: url(../images/s5_video_title3_en.png);}
.lang_en .slide4 .video_title {background-image: url(../images/s5_video_title4_en.png);}
.lang_en .slide5 .video_title {background-image: url(../images/s5_video_title5_en.png);}
.lang_en .slide6 .video_title {background-image: url(../images/s5_video_title6_en.png);}

.lang_jp .slide1 .video_title {background-image: url(../images/s5_video_title1_jp.png);}
.lang_jp .slide2 .video_title {background-image: url(../images/s5_video_title2_jp.png);}
.lang_jp .slide3 .video_title {background-image: url(../images/s5_video_title3_jp.png);}
.lang_jp .slide4 .video_title {background-image: url(../images/s5_video_title4_jp.png);}
.lang_jp .slide5 .video_title {background-image: url(../images/s5_video_title5_jp.png);}
.lang_jp .slide6 .video_title {background-image: url(../images/s5_video_title6_jp.png);}

.lang_kr .slide1 .video_title {background-image: url(../images/s5_video_title1_kr.png);}
.lang_kr .slide2 .video_title {background-image: url(../images/s5_video_title2_kr.png);}
.lang_kr .slide3 .video_title {background-image: url(../images/s5_video_title3_kr.png);}
.lang_kr .slide4 .video_title {background-image: url(../images/s5_video_title4_kr.png);}
.lang_kr .slide5 .video_title {background-image: url(../images/s5_video_title5_kr.png);}
.lang_kr .slide6 .video_title {background-image: url(../images/s5_video_title6_kr.png);}

.video_detail {
  line-height: calc(35 / 1920 * 100vw);
  font-size: calc(18 / 1920 * 100vw);
  color: #7b899f;
}

.s5_tab {
  position: absolute;
  top: calc(181 / 1920 * 100vw);
  left: calc(330 / 1920 * 100vw);
  width: calc(42 / 1920 * 100vw);
}

.s5_tab_item {
  display: block;
  background: url(../images/s5_tab_off.png) center / 100% no-repeat;
  width: calc(42 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  /* margin-bottom: calc(63 / 1920 * 100vw); */
  margin-bottom: calc(90 / 1920 * 100vw);
  position: relative;
}

.s5_tab_item.on {
  background-image: url(../images/s5_tab_on.png);
}

.s5_tab_item::after {
  content: "";
  position: absolute;
  top: calc(29 / 1920 * 100vw);
  left: 0;
  width: calc(42 / 1920 * 100vw);
  /* height: calc(88 / 1920 * 100vw); */
  height: calc(115 / 1920 * 100vw);
  background: url(../images/s5_tab_line.png) center / 100% no-repeat;
  background-repeat-y: repeat;
  box-sizing: content-box;
}

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

.s5_tips {
  font-size: calc(18 / 1920 * 100vw);
  position: absolute;
  line-height: calc(42 / 1920 * 100vw);
  width: 10vw;
  right: 100%;
  color: #8c98a7;
  text-align: right;
  transition: all 0.33s linear;
  display: none;
}

.lock .s5_tips {
  display: none;
}

.s5_tab_item.on .s5_tips {
  color: #ddd2ab;
}

/* s6 */

.s6 {
  height: calc(1092 / 1920 * 100vw);
}

.s6_swiper {
  width: 100vw;
  height: calc(1313 / 1920 * 100vw);
  margin-top: calc(-190 / 1920 * 100vw);
  position: relative;
}

.s6_swiper .swiper-no-swiping {
  width: calc(940 / 1920 * 100vw);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.s6_swiper .swiper-no-swiping::before {
  content: "";
  width: 90vw;
  height: calc(190 / 1920 * 100vw);
  position: absolute;
  top: 0;
  right: 0;
}

.s6_swiper .swiper-no-swiping::after {
  content: "";
  width: 90vw;
  height: calc(290 / 1920 * 100vw);
  position: absolute;
  bottom: 0;
  right: 0;
}

.s6_swiper .img_box {
  transition: all 1s linear;
  width: 100vw;
  height: calc(1313 / 1920 * 100vw);
  background: url(../images/s6_img1.png) center / 100% no-repeat;
}

.s6_swiper .swiper-slide-active .img_box {
  animation: leftIn 0.66s linear;
}

@keyframes leftIn {
  0% {
    transform: translateX(-0.2vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.s6_swiper .swiper-slide-active::before {
  content: "";
  position: absolute;
  top: calc(198 / 1920 * 100vw);
  left: calc(188 / 1920 * 100vw);
  width: calc(718 / 1920 * 100vw);
  height: calc(718 / 1920 * 100vw);
  background-image: url(../images/s6_circle.png);
  background-size: calc(718 / 1920 * 100vw);
  background-repeat: no-repeat;
  animation: ani1 5s cubic-bezier(0.26, 1.26, 0.85, 1.19) infinite;
  z-index: -1;
}

@keyframes ani1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.s6_swiper .slide1 .img_box {
  background-image: url(../images/s6_img7.png);
}
.s6_swiper .slide2 .img_box {
  background-image: url(../images/s6_img8.png);
}
.s6_swiper .slide3 .img_box {
  background-image: url(../images/s6_img9.png);
}
.s6_swiper .slide4 .img_box {
  background-image: url(../images/s6_img1.png);
}
.s6_swiper .slide5 .img_box {
  background-image: url(../images/s6_img3.png);
}
.s6_swiper .slide6 .img_box {
  background-image: url(../images/s6_img4.png);
}

.s6_tab {
  position: absolute;
  top: calc(950 / 1920 * 100vw);
  left: calc(290 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  z-index: 2;
  display: flex;
}

/* .s6_tab_item {
  display: block;
  background: url(../images/s6_tab_off.png) center / 100% no-repeat;
  width: calc(42 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  margin-right: calc(90 / 1920 * 100vw);
  position: relative;
  transition: all 0.33s linear;
} */

.s6_tab_item {
    display: block;
    background: url(../images/s6_tab_off.png) center / 100% no-repeat;
    width: calc(42 / 1920 * 100vw);
    height: calc(42 / 1920 * 100vw);
    margin-right: calc(50 / 1920 * 100vw);
    position: relative;
    transition: all 0.33s linear;
}

.s6_tab_item.on {
  background-image: url(../images/s6_tab_on.png);
}

.s6_tab_item.on::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(31 / 1920 * 100vw);
  width: calc(42 / 1920 * 100vw);
  height: calc(20 / 1920 * 100vw);
  background: url(../images/s6_tab_line2.png) center / 100% no-repeat;
  background-repeat-x: repeat;
  box-sizing: content-box;
}

.s6_tab_item::after {
  content: "";
  position: absolute;
  left: calc(28 / 1920 * 100vw);
  top: 0;
  height: calc(42 / 1920 * 100vw);
  width: calc(79 / 1920 * 100vw);
  background: url(../images/s6_tab_line.png) center / 100% no-repeat;
  background-repeat-y: repeat;
  box-sizing: content-box;
}

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

.s6_tab_item i {
  display: block;
  position: absolute;
  bottom: calc(50 / 1920 * 100vw);
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/s6_icon_off1.png) center / 100% no-repeat;
  width: calc(75 / 1920 * 100vw);
  height: calc(80 / 1920 * 100vw);
}

.s6_tab_item:nth-child(1) i {
  background-image: url(../images/s6_icon_off1.png);
}
.s6_tab_item:nth-child(2) i {
  background-image: url(../images/s6_icon_off2.png);
}
.s6_tab_item:nth-child(3) i {
  background-image: url(../images/s6_icon_off3.png);
}
.s6_tab_item:nth-child(4) i {
  background-image: url(../images/s6_icon_off4.png);
}
.s6_tab_item:nth-child(5) i {
  background-image: url(../images/s6_icon_off5.png);
}
.s6_tab_item:nth-child(6) i {
  background-image: url(../images/s6_icon_off6.png);
}

.s6_tab_item.on i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/s6_icon_border.png) center / 100% no-repeat;
}

.s6_tab_item.on:nth-child(1) i {
  background-image: url(../images/s6_icon_on1.png);
}
.s6_tab_item.on:nth-child(2) i {
  background-image: url(../images/s6_icon_on2.png);
}
.s6_tab_item.on:nth-child(3) i {
  background-image: url(../images/s6_icon_on3.png);
}
.s6_tab_item.on:nth-child(4) i {
  background-image: url(../images/s6_icon_on4.png);
}
.s6_tab_item.on:nth-child(5) i {
  background-image: url(../images/s6_icon_on5.png);
}
.s6_tab_item.on:nth-child(6) i {
  background-image: url(../images/s6_icon_on6.png);
}

.s6_panel {
  position: absolute;
  left: calc(1061 / 1920 * 100vw);
  top: calc(234 / 1920 * 100vw);
  width: calc(533 / 1920 * 100vw);
  z-index: 2;
}

.s6_panel .panel {
  display: none;
}

.s6_panel .panel.on {
  display: block;
}

/* .s6_headline {
  background: url(../images/s6_headline1.png) center left / auto 100% no-repeat;
  width: 100%;
  height: calc(28 / 1920 * 100vw);
  margin-bottom: calc(40 / 1920 * 100vw);
}

.panel1 .s6_headline {
  background-image: url(../images/s6_headline1.png);
}
.panel2 .s6_headline {
  background-image: url(../images/s6_headline2.png);
}
.panel3 .s6_headline {
  background-image: url(../images/s6_headline3.png);
}
.panel4 .s6_headline {
  background-image: url(../images/s6_headline4.png);
} */

.s6_headline {
    height: calc(100 / 1920 * 100vw);
    line-height: calc(100 / 1920 * 100vw);
    font-size: calc(48 / 1920 * 100vw);
    margin: calc(10 / 1920 * 100vw) auto;
    font-size: calc(42 / 1920 * 100vw);
    color: #75828f;
}

.s6_detail {
  font-size: calc(22 / 1920 * 100vw);
  line-height: calc(37 / 1920 * 100vw);
  color: #5c5c5c;
}

.s6_detail p {
  margin-bottom: calc(33 / 1920 * 100vw);
}

/* s7 */

.s7 {
  height: calc(1000 / 1920 * 100vw);
}


.s7 .sec_title {
  background: url(../images/sec_title7_en.png) center bottom / auto calc(62 / 1920 * 100vw) no-repeat;
  width: calc(751 / 1920 * 100vw);
  height: calc(62 / 1920 * 100vw);
  position: relative;
}

.lang_jp .s7 .sec_title {
  background-image: url(../images/sec_title7_jp.png);
  width: calc(556 / 1920 * 100vw);
}

.lang_kr .s7 .sec_title {
  background-image: url(../images/sec_title7_kr.png);
  width: calc(253 / 1920 * 100vw);
}

.s7 .sec_title::before,
.s7 .sec_title::after {
  content: "";
  background: url(../images/sec_title_icon1.png) center / 100% no-repeat;
  width: calc(50 / 1920 * 100vw);
  height: calc(62 / 1920 * 100vw);
  position: absolute;
  bottom: 0;
}

.s7 .sec_title::before {
  left: calc(100% + 40 / 1920 * 100vw);
  transform: rotate(0.5turn);
}

.s7 .sec_title::after {
  right: calc(100% + 40 / 1920 * 100vw);
}

.s7_swiper {
  margin-top: calc(62 / 1920 * 100vw);
  width: calc(1239 / 1920 * 100vw);
  height: calc(639 / 1920 * 100vw);
}

.s7_swiper .img_box {
  background: url(../images/s7_slide1_en.png) center / 100% no-repeat;
  width: calc(1239 / 1920 * 100vw);
  height: calc(639 / 1920 * 100vw);
  position: relative;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url(../images/s7_slide_mask.png);
  -webkit-mask-position: center center;
}

.s7_swiper .swiper-slide i {
  background: url(../images/s7_slide_border.png) center / 100% no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 注意素材有的是png 有的是jpg */

.s7_swiper .slide1 .img_box {background-image: url(../images/s7_slide1_en.png);}
.s7_swiper .slide2 .img_box {background-image: url(../images/s7_slide2_en.png);}
.s7_swiper .slide3 .img_box {background-image: url(../images/s7_slide3_en.png);}
.s7_swiper .slide4 .img_box {background-image: url(../images/s7_slide4_en.png);}
.s7_swiper .slide5 .img_box {background-image: url(../images/s7_slide5_en.png);}
.s7_swiper .slide7 .img_box {background-image: url(../images/s7_slide7_jp.jpg);}
.s7_swiper .slide8 .img_box {background-image: url(../images/s7_slide8_jp.jpg);}
.s7_swiper .slide9 .img_box {background-image: url(../images/s7_slide9_jp.jpg);}

.lang_jp .s7_swiper .slide1 .img_box {background-image: url(../images/s7_slide1_jp.png);}
.lang_jp .s7_swiper .slide2 .img_box {background-image: url(../images/s7_slide2_jp.png);}
.lang_jp .s7_swiper .slide3 .img_box {background-image: url(../images/s7_slide4_jp.jpg);}
.lang_jp .s7_swiper .slide4 .img_box {background-image: url(../images/s7_slide5_jp.png);}
.lang_jp .s7_swiper .slide5 .img_box {background-image: url(../images/s7_slide3_jp.png);}

.lang_kr .s7_swiper .slide1 .img_box {background-image: url(../images/s7_slide1_kr.jpg);}
.lang_kr .s7_swiper .slide2 .img_box {background-image: url(../images/s7_slide2_kr.jpg);}
.lang_kr .s7_swiper .slide3 .img_box {background-image: url(../images/s7_slide3_kr.jpg);}
.lang_kr .s7_swiper .slide4 .img_box {background-image: url(../images/s7_slide4_kr.jpg);}
.lang_kr .s7_swiper .slide5 .img_box {background-image: url(../images/s7_slide5_kr.jpg);}

.s7_tab {
  display: flex;
  justify-content: center;
  position: relative;
  width: calc(210 / 1920 * 100vw);
  margin: calc(30 / 1920 * 100vw) auto 0;
  filter: drop-shadow(0 0 0.5vw #000000);
}

.s7_tab::before,
.s7_tab::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  background: url(../images/s7_tab_icon1.png) center / 100% no-repeat;
  width: calc(28 / 1920 * 100vw);
}

.s7_tab::before {
  right: 100%;
}

.s7_tab::after {
  left: 100%;
  background-image: url(../images/s7_tab_icon2.png);
}

.s7_tab_item {
  background: url(../images/s7_tab_off.png) center / 100% no-repeat;
  width: calc(15 / 1920 * 100vw);
  height: calc(15 / 1920 * 100vw);
  display: block;
  margin: 0 calc(5 / 1920 * 100vw);
}

.s7_tab_item.on {
  background-image: url(../images/s7_tab_on.png);
}

/* s9 -- faqs.html */

.s9 {
  padding-top: calc(130 / 1920 * 100vw);
  height: calc(685 / 1920 * 100vw);
  box-sizing: content-box;
  width: calc(1240 / 1920 * 100vw);
  margin: 0 auto;
}

.device_nav_list {
    display: flex;
    justify-content: center;
    margin-top: calc(95 / 1920 * 100vw);
}
.device_nav_item {
  padding: 0 calc(8 / 1920 * 100vw);
  height: calc(42 / 1920 * 100vw);
  line-height: calc(42 / 1920 * 100vw);
  color: #7e8fb0;
  font-family: "TrajanPro";
  font-weight: 900;
  display: block;
  margin: 0 calc(50 / 1920 * 100vw);
  font-size: calc(28 / 1920 * 100vw);
}
.device_nav_item.on {
  background: url(../images/news_nav.png) center bottom / 100% calc(4 / 1920 * 100vw) no-repeat;
  color: #eef0f3;
}
.device_list {
    margin-top: calc(70 / 1920 * 100vw);
    font-size: calc(20 / 1920 * 100vw);
    line-height: calc(43 / 1920 * 100vw);
}
.requirement_panel {
    display: none;
}
.requirement_panel.on {
    justify-content: center;
    display: flex;
}
.requirement_item {
  width: calc(630 / 1920 * 100vw);
  padding: 0 calc(120 / 1920 * 100vw);
  text-align: center;
}
.requirement_item:nth-child(1) {
  border-right: 1px solid rgba(254, 247, 214, 0.26);
}
.r_title {
    color: #ffffff;
    font-size: calc(24 / 1920 * 100vw);
}
.requirement_item h2.r_title{
    font-size: calc(28 / 1920 * 100vw);
}
.r_t {
    color: #7e8fb0;
}

/* s10 -- faqs.html */

.s10 {
  height: calc(855 / 1920 * 100vw);
  display: block;
}
.s10.on {
  display: block;
}
.faqs_panel {
  background: url(../images/inner/faqs_panel.png) top center / 100% no-repeat;
  height: calc(446 / 1920 * 100vw);
  width: calc(1240 / 1920 * 100vw);
  margin: calc(35 / 1920 * 100vw) auto 0;
  padding-top: calc(20 / 1920 * 100vw);
  padding-bottom: calc(5 / 1920 * 100vw);
  position: relative;
}

.question {
  position: relative;
  padding-left: calc(60 / 1920 * 100vw);
  font-size: calc(20 / 1920 * 100vw);
  line-height: calc(38 / 1920 * 100vw);
  color: #7e8fb0;
  margin-left: calc(50 / 1920 * 100vw);
  margin-bottom: calc(10 / 1920 * 100vw);
  display: block;
  cursor: pointer;
}


.question>a {
  display: block;
  color: inherit;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.question>i {
  position: absolute;
  display: block;
  width: calc(60 / 1920 * 100vw);
  text-align: right;
  top: 0;
  left: 0;
}

.question>i::after {
  content: "";
  position: absolute;
  border-top: calc(8 / 1920 * 100vw) solid transparent;
  border-left: calc(16 / 1920 * 100vw) solid #fff;
  border-bottom: calc(8 / 1920 * 100vw) solid transparent;
  left: calc(6 / 1920 * 100vw);
  top: calc(12 / 1920 * 100vw);
}
.question.on>i::after{
  border-bottom: initial;
  border-left: calc(9 / 1920 * 100vw) solid transparent;
  border-right: calc(9 / 1920 * 100vw) solid transparent;
  border-top: calc(16 / 1920 * 100vw) solid #fff;
}

.question>div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.question>div.question_li span{
  display: none;
  opacity: .8;
}
.question.on>div.question_li span{
  display: -webkit-box;
  font-size: calc(20 / 1920 * 100vw);
  line-height: calc(28 / 1920 * 100vw);
  margin-top: calc(6 / 1920 * 100vw);
  width: 96%;
}
.question.q5>div.question_li span,
.faqs_panel_m .question.q6>div.question_li span{
  font-size: calc(18 / 1920 * 100vw);
  line-height: calc(22 / 1920 * 100vw);
}
.faqs_panel_m .question.q2>div.question_li span{
  line-height: calc(22 / 1920 * 100vw);
}

/* .faqs_more {
  position: absolute;
  display: block;
  background: url(../images/inner/btn_next.png) center bottom / 100% no-repeat;
  width: calc(156 / 1920 * 100vw);
  height: calc(62 / 1920 * 100vw);
  line-height: calc(62 / 1920 * 100vw);
  color: #b5bcc5;
  font-size: calc(25 / 1920 * 100vw);
  text-transform: uppercase;
  font-family: "TrajanPro";
  font-weight: 900;
  bottom: calc(-80 / 1920 * 100vw);
  right: 0;
} */

.faqs_more {
  display: block;
  position: absolute;
  background: url(../images/btn_more.png) center bottom / 100% no-repeat;
  width: calc(156 / 1920 * 100vw);
  height: calc(62 / 1920 * 100vw);
  line-height: calc(62 / 1920 * 100vw);
  color: #b5bcc5;
  font-size: calc(25 / 1920 * 100vw);
  text-transform: uppercase;
  right: 0;
  font-weight: 900;
  top: calc(450 / 1920 * 100vw);
}

.lang_kr .faqs_more {display: none;}
.lang_en .faqs_more {display: none;}

/* faqs_bg */

.faqs_bg_list {
  position: absolute;
  top: 0;
  z-index: 0;
}

.faqs_bg {
  background: url(../images/inner/faqs_01.jpg) center / 100% no-repeat;
  width: 100vw;
  height: calc(1080 / 1920 * 100vw);
  margin-top: -1px;
}

.faqs_bg1 {
  background-image: url(../images/inner/faqs_01.jpg);
}
.faqs_bg2 {
  background-image: url(../images/inner/faqs_02.jpg);
}
.faqs_bg3 {
  background-image: url(../images/inner/faqs_03.jpg);
  background-position-y: top;
}

/* bg */

.bg_list {
  position: absolute;
  top: 0;
  z-index: 0;
}

.bg {
  background: url(../images/bg_01.jpg) center / 100% no-repeat;
  width: 100vw;
  height: calc(996 / 1920 * 100vw);
  margin-top: -1px;
}

.bg1 {
  background-image: url(../images/bg_01.jpg);
}
.bg2 {
  background-image: url(../images/bg_02.jpg);
}
.bg3 {
  background-image: url(../images/bg_03.jpg);
}
.bg4 {
  background-image: url(../images/bg_04.jpg);
}
.bg5 {
  background-image: url(../images/bg_05.jpg);
}
.bg6 {
  background-image: url(../images/bg_06.jpg);
}
.bg7 {
  background-image: url(../images/bg_07.jpg);
}

/* prop */

.prop_list {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100vw;
  left: 0;
  left: 50%;
  transform: translateX(-50%);
}

.prop {
  background: url(../images/prop1.png) center / 100% no-repeat;
  position: absolute;
  animation: ani_move1 5s linear infinite;
}

@keyframes ani_move1 {
  0%,
  100% {
    transform: translateY(-0.5vw);
    transition-timing-function: cubic-bezier(0, 0, 0.43, 0.99);
  }
  50% {
    transform: translateY(0) scale(1.02);
    transition-timing-function: cubic-bezier(0.63, 0.07, 1, 1);
  }
}

@keyframes ani_move2 {
  0%,
  100% {
    transform: translateX(0.5vw);
    transition-timing-function: cubic-bezier(0, 0, 0.43, 0.99);
  }
  50% {
    transform: translateX(0) scale(1.02);
    transition-timing-function: cubic-bezier(0.63, 0.07, 1, 1);
  }
}

@keyframes ani_move3 {
  0%,
  100% {
    transform: translateX(-0.5vw);
    transition-timing-function: cubic-bezier(0, 0, 0.43, 0.99);
  }
  50% {
    transform: translateX(0) scale(1.02);
    transition-timing-function: cubic-bezier(0.63, 0.07, 1, 1);
  }
}

@keyframes ani_move4 {
  0%,
  100% {
    transform: translateX(-0.5vw) scale(0.98);
    transition-timing-function: cubic-bezier(0, 0, 0.43, 0.99);
  }
  50% {
    transform: translateX(0) scale(0.96);
    transition-timing-function: cubic-bezier(0.63, 0.07, 1, 1);
  }
}

@keyframes ani_opacity1 {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.prop1 {
  background-image: url(../images/prop1.png);
  left: calc(390 / 1920 * 100vw);
  top: calc(1485 / 1920 * 100vw);
  width: calc(185 / 1920 * 100vw);
  height: calc(70 / 1920 * 100vw);
  display: none;
}
.prop2 {
  background-image: url(../images/prop2.png);
  left: calc(1570 / 1920 * 100vw);
  top: calc(1480 / 1920 * 100vw);
  width: calc(102 / 1920 * 100vw);
  height: calc(120 / 1920 * 100vw);
  animation: ani_move2 5s linear infinite;
}
.prop3 {
  background-image: url(../images/prop3.png);
  left: calc(170 / 1920 * 100vw);
  top: calc(1780 / 1920 * 100vw);
  width: calc(221 / 1920 * 100vw);
  height: calc(266 / 1920 * 100vw);
  animation: ani_move2 5s linear infinite;
}
.prop4 {
  background-image: url(../images/prop4.png);
  left: calc(1575 / 1920 * 100vw);
  top: calc(1960 / 1920 * 100vw);
  width: calc(192 / 1920 * 100vw);
  height: calc(105 / 1920 * 100vw);
  animation: ani_move2 5s linear infinite;
}
.prop5 {
  background-image: url(../images/prop5.png);
  left: calc(1615 / 1920 * 100vw);
  top: calc(2400 / 1920 * 100vw);
  width: calc(101 / 1920 * 100vw);
  height: calc(59 / 1920 * 100vw);
  animation: ani_move2 5s linear infinite;
}
.prop6 {
  background-image: url(../images/prop6.png);
  left: calc(1650 / 1920 * 100vw);
  top: calc(2450 / 1920 * 100vw);
  width: calc(173 / 1920 * 100vw);
  height: calc(112 / 1920 * 100vw);
  animation: ani_move2 5s linear infinite;
}
.prop7 {
  background-image: url(../images/prop7.png);
  right: 0;
  top: calc(1480 / 1920 * 100vw);
  width: calc(349 / 1920 * 100vw);
  height: calc(459 / 1920 * 100vw);
}
.prop8 {
  background-image: url(../images/prop8.png);
  left: calc(-130 / 1920 * 100vw);
  top: calc(1470 / 1920 * 100vw);
  width: calc(1639 / 1920 * 100vw);
  height: calc(949 / 1920 * 100vw);
  animation: ani_move4 5s linear infinite;
}
.prop9 {
  background-image: url(../images/prop9.png);
  left: calc(-110 / 1920 * 100vw);
  top: calc(1110 / 1920 * 100vw);
  width: calc(1920 / 1920 * 100vw);
  height: calc(1451 / 1920 * 100vw);
  animation: ani_move4 5s linear infinite;
}
.prop10 {}
.prop11 {
  background-image: url(../images/prop11.png);
  left: calc(125 / 1920 * 100vw);
  top: calc(3060 / 1920 * 100vw);
  width: calc(308 / 1920 * 100vw);
  height: calc(360 / 1920 * 100vw);
}
.prop12 {
  background-image: url(../images/prop12.png);
  left: calc(55 / 1920 * 100vw);
  top: calc(3775 / 1920 * 100vw);
  width: calc(101 / 1920 * 100vw);
  height: calc(170 / 1920 * 100vw);
}

.moon {
  background: url(../images/moon.png) center / 100% no-repeat;
  position: absolute;
  animation: ani_opacity1 5s linear infinite;
  left: calc(-25 / 1920 * 100vw);
  top: calc(1145 / 1920 * 100vw);
  width: 100vw;
  height: calc(2128 / 1920 * 100vw);
  display: none;
}

/* pop */

.b_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.88);
  z-index: 9999999999;
}

.pop {
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: none;
  background: url(../images/pop_bg.png) center / 100% no-repeat;
  width: calc(493 / 1624 * 100vw);
  height: calc(260 / 1624 * 100vw);
}

.pop_close {
  background: url(../images/pop_close.png) center / 100% no-repeat;
  width: calc(32 / 1624 * 100vw);
  height: calc(32 / 1624 * 100vw);
  display: block;
  position: absolute;
  top: calc(15 / 1624 * 100vw);
  right: calc(15 / 1624 * 100vw);
}
/* pop2 */

.pop2 {
  padding-top: calc(30 / 1920 * 100vw);
}
.pop_tips {
  font-size: calc(24 / 1920 * 100vw);
  line-height: calc(30 / 1920 * 100vw);
  text-transform: uppercase;
  text-align: center;
}
.pop_tips_more {
  font-size: calc(20 / 1920 * 100vw);
  line-height: calc(24 / 1920 * 100vw);
  text-align: center;
  padding: calc(35 / 1920 * 100vw) calc(35 / 1920 * 100vw) 0;
}
.pop2 .pop_detail {
  position: relative;
  height: calc(180 / 1920 * 100vw);
}
.pop2 .bottom_download_box {
  position: relative;
  top: unset;
  margin-left: unset;
  transform: scale(0.8);
}
.pop2 .bottom_download_box .btn_ios {
  margin-right: calc(26 / 1920 * 100vw);
}
.pop2 .btn_ios.on ~ .code_box3 {
  display: block;
  left: calc(81 / 1920 * 100vw);
}
.pop2 .btn_google.on ~ .code_box3 {
  display: block;
  left: calc(387 / 1920 * 100vw);
}
/* pop3 */

.pop3 {
  width: calc(1210 / 1920 * 100vw);
  height: calc(780 / 1920 * 100vw);
  background: none;
}

.pop3_detail {
  width: 100%;
  height: 100%;
}

.pop3 .pop_close {
  background: url(../images/close.png) center / 100% no-repeat;
  width: calc(60 / 1920 * 100vw);
  height: calc(60 / 1920 * 100vw);
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
}

/* aihelp */
.AIHelpSupportBox {
  z-index: 11;
  width: 375px;
  height: 500px;
  position: fixed;
  right: calc(47 / 1920 * 100vw);
  bottom: calc(100 / 1920 * 100vw);
}

#close {
  background: url(../images/close.png) center / 100% no-repeat;
  width: 25px;
  height: 25px;
  display: block;
  position: absolute;
  top: 9px;
  right: 9px;
}