body { display:block; min-width:1668px; }

.app { position:relative; display:block; margin:0 auto; overflow:hidden }
.app .topbar { position:absolute; top:0px; left:0px; right:0px; z-index:10; display:block; height:88px; background-color:rgba(0,0,0,0.5); }
.app .topbar .game { position:absolute; top:16px; left:260px; display:flex; justify-content:flex-start; align-items:center; gap:24px }
.app .topbar .game .logo { float:left; display:block; width:146px; height:146px; background:url("../images/logo.png?v=1.0.0") no-repeat 50% 50%; }
.app .topbar .game .name { float:left; display:block; width:302px; height:124px; background:url("../images/name.png?v=1.0.0") no-repeat 50% 50%; }
.app .main { position:relative; z-index:1; display:block; height:3120px; overflow:hidden; }
.app .main .bgs { position:absolute; top:0px; left:50%; z-index:1; display:block; width:1920px; height:3120px; margin-left:-960px; pointer-events:none; }
.app .main .bgs .bg { display:block; width:100%; height:520px; background-repeat:no-repeat; background-position:50% 0%; }
.app .main .bgs .bg.bg1 { background-image:url("../images/bg1.png?v=1.0.0"); }
.app .main .bgs .bg.bg2 { background-image:url("../images/bg2.png?v=1.0.0"); }
.app .main .bgs .bg.bg3 { background-image:url("../images/bg3.png?v=1.0.0"); }
.app .main .bgs .bg.bg4 { background-image:url("../images/bg4.png?v=1.0.0"); }
.app .main .bgs .bg.bg5 { background-image:url("../images/bg5.png?v=1.0.0"); }
.app .main .bgs .bg.bg6 { background-image:url("../images/bg6.png?v=1.0.0"); }
.app .main .downloads { position:absolute; top:924px; left:50%; z-index:2; display:flex; justify-content:center; align-items:center; gap:48px; width:720px; transform:translate(-50%,0%); }
.app .main .downloads .download { cursor:pointer; display:block; width:336px; height:132px; background-image:url("../images/downloads.png?v=1.0.0"); background-repeat:no-repeat; background-size:336px 264px; }
.app .main .downloads .download.download-ios { background-position:0px 0px; }
.app .main .downloads .download.download-android { background-position:0px -132px; }
.app .main .introduction { position:absolute; top:1154px; left:50%; z-index:2; display:block; width:1870px; height:802px; background:url("../images/introduction.png?v=1.0.0") no-repeat 50% 50%; transform:translate(-50%,0%); }
.app .main .features { position:absolute; top:2020px; left:50%; z-index:2; display:block; width:562px; height:946px; transform:translate(-50%,0%); }
.app .main .features .features-swiper { position:relative; z-index:1; display:block; width:100%; height:100%; }
.app .main .features .features-swiper .swiper { display:block; width:100%; height:100%; }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide .feature { display:block; width:100%; height:100%; background:url("../images/feature.png?v=1.0.0") no-repeat 50% 50%; padding:30px 34px 36px 32px; filter:brightness(0.5); }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide .feature img { display:block; width:100%; height:100%; border:2px solid #918bb8 }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide-active .feature { filter:brightness(1); }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide-active .feature img {  }
.app .main .features .features-swiper .swiper-button-prev,
.app .main .features .features-swiper .swiper-button-next { position:absolute; top:50%; z-index:12; cursor:pointer; width:122px; height:108px; background-image:url("../images/features-navigate.png?v=1.0.0"); background-repeat:no-repeat; background-size:244px 108px; margin-top:-54px; }
.app .main .features .features-swiper .swiper-button-prev { left:-550px; background-position:0 0; }
.app .main .features .features-swiper .swiper-button-next { right:-550px; background-position:-122px 0; }
.app .main .features .features-swiper .swiper-pagination { position:absolute; bottom:-90px; left:50%; display:block; white-space:nowrap; transform:translate(-50%,0%); }
.app .main .features .features-swiper .swiper-pagination .swiper-pagination-bullet { position:relative; display:inline-block; width:42px; height:42px; background-color:transparent; background-image:url("../images/features-pagination.png?v=1.0.0"); background-repeat:no-repeat; background-position:0px 0px; background-size:84px 42px; margin:0 24px; opacity:1; }
.app .main .features .features-swiper .swiper-pagination .swiper-pagination-bullet-active { background-position:-42px 0px; }
.app .footer { display:block; background-color:#000; padding:32px 0; }
.app .footer .content { display:flex; justify-content:flex-start; align-items:center; gap:64px; width:900px; margin:0 auto; overflow:hidden; }
.app .footer .content .name { display:block; width:246px; height:102px; background:url("../images/name.png?v=1.0.0") no-repeat 50% 50% / 246px 102px; }
.app .footer .content .copyright { flex:1; display:block; color:#fff; font-size:16px; text-align:left; line-height:24px; }
.app .footer .content .copyright p + p { margin-top:8px; }
.app .footer .content .copyright a { color:#fff; text-decoration:underline; }