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

.app { position:relative; display:block; margin:0px 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 .content { position:relative; display:block; width:1680px; height:100%; margin:0 auto; }
.app .topbar .content .game { position:absolute; top:16px; left:140px; display:flex; justify-content:flex-start; align-items:center; gap:24px }
.app .topbar .content .game .logo { float:left; display:block; width:140px; height:140px; background:url("../images/logo.png?v=1.0.0") no-repeat 50% 50%; }
.app .topbar .content .game .name { float:left; display:block; width:160px; height:118px; background:url("../images/name.png?v=1.0.0") no-repeat 50% 50%; }

.app .main { position:relative; z-index:1; display:block; height:3100px; overflow:hidden; }
.app .main .bgs { position:absolute; top:0px; left:50%; z-index:1; display:block; width:1920px; height:3100px; margin-left:-960px; pointer-events:none; }
.app .main .bgs .bg { display:block; width:100%; height:620px; 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 .btn-cadpa { position:absolute; top:156px; right:68px; z-index:2; cursor:pointer; display:block; width:80px; height:102px; background:url("../images/btn-cadpa.png?v=1.0.0") no-repeat 50% 50%; }
.app .main .btn-video { position:absolute; top:478px; left:50%; z-index:2; display:block; width:200px; height:200px; cursor:pointer; background:url("../images/btn-video.png?v=1.0.0") no-repeat 50% 50%; transform:translate(-50%,0%); }
.app .main .downloads { position:absolute; top:900px; left:50%; z-index:2; display:flex; justify-content:center; align-items:center; gap:80px; width:760px; transform:translate(-50%,0%); }
.app .main .downloads .download { cursor:pointer; display:block; width:340px; height:114px; background:url("../images/downloads.png?v=1.0.0") no-repeat 50% 0px; background-size:340px 228px; }
.app .main .downloads .download.download-ios { background-position:50% 0px; }
.app .main .downloads .download.download-android { background-position:50% -114px; }
.app .main .intro { position:absolute; top:1290px; left:50%; z-index:2; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; transform:translate(-50%,0%); }
.app .main .intro .title { display:block; width:358px; height:268px; background:url("../images/title.png?v=1.0.0") no-repeat 50% 50%; }
.app .main .intro .subtitle { display:block; width:876px; height:132px; background:url("../images/subtitle.png?v=1.0.0") no-repeat 50% 50%; margin-top:4px; }
.app .main .intro .description { display:block; width:1674px; height:256px; background:url("../images/description.png?v=1.0.0") no-repeat 50% 50%; margin-top:4px; }
.app .main .intro .role { position:absolute; top:0px; left:50%; z-index:3; display:block; width:1744px; height:434px; background:url("../images/role.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:546px; height:924px; 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 .frame { display:block; width:100%; height:100%; background:url("../images/frame.png?v=1.0.0") no-repeat 50% 50%; padding:24px; filter:brightness(0.5); }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide .frame img { display:block; width:100%; height:100%; border-radius:16px; }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide-active .frame { filter:brightness(1); }
.app .main .features .features-swiper .swiper .swiper-wrapper .swiper-slide-active .frame 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:120px; height:120px; background:url("../images/features-navigate.png?v=1.0.0") no-repeat 0px 50%; background-color:transparent; background-size:240px 120px; margin-top:-60px; }
.app .main .features .features-swiper .swiper-button-prev { left:-560px; background-position:0px 50%; }
.app .main .features .features-swiper .swiper-button-next { right:-560px; background-position:-120px 50%; }
.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:60px; height:60px; background:url("../images/features-pagination.png?v=1.0.0") no-repeat 0px 50%; background-color:transparent; background-size:120px 60px; margin:0 24px; opacity:1; }
.app .main .features .features-swiper .swiper-pagination .swiper-pagination-bullet-active { background-position:-60px 0px; }

.app .footer { display:block; background-color:#000; padding:40px 0; }
.app .footer .content { display:flex; justify-content:flex-start; align-items:center; gap:40px; width:1180px; margin:0 auto; overflow:hidden; }
.app .footer .content .name { display:block; width:152px; height:114px; background:url("../images/name.png?v=1.0.0") no-repeat 50% 50% / 152px 114px; }
.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; }

.dialog-player { position:relative; display:flex; flex-direction:column; align-items:center; }
.dialog-player .content { display:block; width:960px; height:540px; }
.dialog-player .content video { display:block; width:100%; height:auto; }
.dialog-player .btn-close { position:absolute; bottom:-68px; left:50%; cursor:pointer; display:block; width:48px; height:48px; transform:translate(-50%,0%); }
.dialog-player .btn-close svg { display:block; width:100%; height:100%; }