body { display:block; min-width:1280px; overflow-x:hidden; overflow-y:auto; }

#app { position:relative; display:block; width:100%; }

.topbar { position:absolute; top:0px; left:0px; right:0px; z-index:2; display:block; height:86px; background-color:#fff; box-shadow:0px 2px 8px 0px rgba(0,0,0,0.5); }
.topbar .content { position:relative; display:block; width:1280px; height:100%; margin:0 auto; }
.topbar .content .game { position:absolute; top:0px; left:0px; display:block; }
.topbar .content .game-logo { float:left; display:block; width:128px; height:128px; border:10px solid #fff; border-radius:36px; overflow:hidden; }
.topbar .content .game-logo img { display:block; width:100%; height:100%; }
.topbar .content .game-name { float:left; display:block; margin-left:10px; padding:25px 0px; overflow:hidden; }
.topbar .content .game-name h2 { display:block; color:#000; font-size:36px; font-weight:700; line-height:1; }

.main { position:relative; z-index:1; display:block; height:2784px; overflow:hidden; }
.main .navtop { z-index:10; position:absolute; top:0; width:100%; height:144px; background:url('../images/nav_top.png') no-repeat 0 center; }
.main .bgs { position:absolute; top:0px; left:50%; z-index:1; display:block; width:1920px; height:2830px; margin-left:-960px; pointer-events:none; }
.main .bgs .bg1 { height:1050px; background:url('../images/bg1.jpg') no-repeat 0 center; }
.main .bgs .bg2 { height:1780px; background:url('../images/bg2.jpg') no-repeat 0 center; }
.main .btn-cadpa { position:absolute; top:136px; right:160px; 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%; }
.main .btn-downloads { position:absolute; top:930px; left:50%; z-index:2; display:flex; justify-content:center; align-items:center; gap:108px; transform:translate(-50%,0%); }
.main .btn-downloads .btn-download { cursor:pointer; display:block; width:320px; height:96px; background-image:url("../images/btn-downloads.png?v=1.0.0"); background-repeat:no-repeat; }
.main .btn-downloads .btn-download.btn-download-ios { background-position:50% 0px; }
.main .btn-downloads .btn-download.btn-download-android { background-position:50% -96px; }
.main .features { position:absolute; top:1690px; left:50%; z-index:2; display:block; width:556px; height:950px; margin-left:-278px; }
.main .features .features-swiper { position:relative; z-index:1; display:block; width:100%; height:100%; }
.main .features .features-swiper .swiper { display:block; width:100%; height:100%; }
.main .features .features-swiper .swiper .swiper-wrapper .swiper-slide img { display:block; width:100%; height:100%; filter:brightness(0.5); }
.main .features .features-swiper .swiper .swiper-wrapper .swiper-slide-active img { filter:brightness(1.0); }
.main .features .features-swiper .swiper-button-prev,
.main .features .features-swiper .swiper-button-next { position:absolute; top:50%; z-index:12; cursor:pointer; width:126px; height:112px; background-repeat:no-repeat; background-position:50% 50%; background-size:100% 100%; margin-top:-56px; }
.main .features .features-swiper .swiper-button-prev { left:-200px; background-image:url("../images/btn-prev.png?v=1.0.0"); }
.main .features .features-swiper .swiper-button-next { right:-200px; background-image:url("../images/btn-next.png?v=1.0.0"); }
.main .features .features-swiper .swiper-pagination { position:absolute; bottom:-92px; left:50%; display:block; white-space:nowrap; transform:translate(-50%,0%); }
.main .features .features-swiper .swiper-pagination .swiper-pagination-bullet { position:relative; display:inline-block; width:24px; height:24px; background-color:#fff; margin:0 24px; opacity:1; }
.main .features .features-swiper .swiper-pagination .swiper-pagination-bullet::after { content:""; position:absolute; top:50%; left:50%; display:block; width:36px; height:36px; border:1px solid transparent; border-radius:50%; transform:translate(-50%,-50%); }
.main .features .features-swiper .swiper-pagination .swiper-pagination-bullet-active { background-color:#fff68e; }
.main .features .features-swiper .swiper-pagination .swiper-pagination-bullet-active::after { border-color:#fff68e; }

.footer { display:block; background-color:#191919; padding:40px 0px; }
.footer p { display:block; color:#878787; font-size:16px; text-align:center; line-height:32px; }
.footer a { color:inherit; }

.dialog-cadpa { display:block; width:726px; height:666px; background:url("../images/dialog-cadpa.png?v=1.0.0") no-repeat 50% 50%; }
.dialog-cadpa .content { display:block; width:100%; height:100%; padding:140px 56px 0px 56px; color:#61594c; font-size:18px; font-weight:700; text-align:left; line-height:32px; }
.dialog-cadpa .btn-close { position:absolute; top:-12px; right:-12px; width:102px; height:102px; background:url("../images/dialog-cadpa-btn-close.png?v=1.0.0") no-repeat 50% 50%; }