body { display:block; overflow-x:hidden; overflow-y:auto; }

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

.topbar { position:absolute; top:0; left:0; right:0; z-index:2; display:flex; justify-content:flex-start; align-items:center; height:0.68rem; background-color:rgba(0,0,0,0.6); padding:0 0.80rem; }
.topbar .logo { display:flex; justify-content:flex-start; align-items:center; height:0.68rem; }
.topbar .logo img { display:block; width:1.06rem; height:0.54rem; }
.topbar .menu { display:flex; justify-content:flex-start; align-items:center; margin-left:0.68rem; }
.topbar .menu .menu-item { position:relative; display:block; min-width:1.18rem; height:0.68rem; color:#fff; font-size:0.16rem; text-align:center; line-height:0.68rem; }
.topbar .menu .menu-item::before { content:""; position:absolute; top:0; bottom:0; left:0; right:0; display:block; background:url("../images/menu-item-active.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; opacity:0; transition:all 0.3s cubic-bezier(0.34,0.69,0.1,1); }
.topbar .menu .menu-item:hover {  }
.topbar .menu .menu-item:hover::before { opacity:1; }

.main { position:relative; z-index:1; display:block; height:55.00rem; overflow:hidden; }
.main .bgs { position:absolute; top:0; left:50%; z-index:1; display:block; width:19.20rem; height:55.00rem; margin-left:-9.60rem; pointer-events:none; }
.main .bgs .bg { display:block; width:100%; height:11.00rem; background-repeat:no-repeat; background-position:50% 0; background-size:100% 100%; }
.main .bgs .bg.bg1 { background-image:url("../images/bg1.jpg?v=1.0.0"); }
.main .bgs .bg.bg2 { background-image:url("../images/bg2.jpg?v=1.0.0"); }
.main .bgs .bg.bg3 { background-image:url("../images/bg3.jpg?v=1.0.0"); }
.main .bgs .bg.bg4 { background-image:url("../images/bg4.jpg?v=1.0.0"); }
.main .bgs .bg.bg5 { background-image:url("../images/bg5.jpg?v=1.0.0"); }
.main .slogan { position:absolute; top:2.20rem; left:2.70rem; z-index:2; display:block; width:6.44rem; height:3.20rem; background:url("../images/slogan.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; color:transparent; text-align:center; line-height:3.20rem; }
.main .btn-cadpa { position:absolute; top:1.64rem; left:0.80rem; z-index:2; cursor:pointer; display:block; width:0.80rem; height:1.02rem; background:url("../images/btn-cadpa.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; }
.main .btn-video { position:absolute; top:2.56rem; left:3.16rem; z-index:2; cursor:pointer; display:block; width:3.48rem; height:1.32rem; background:url("../images/btn-video.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; }
.main .btn-download { position:absolute; top:5.64rem; left:3.96rem; z-index:2; cursor:pointer; display:block; width:3.36rem; height:1.08rem; background:url("../images/btn-download.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; }
.main .btn-download-android { position:absolute; top:6.80rem; left:16.48rem; z-index:2; cursor:pointer; display:block; width:2.22rem; height:0.96rem; }
.main .btn-download-ios { position:absolute; top:7.82rem; left:16.48rem; z-index:2; cursor:pointer; display:block; width:2.22rem; height:0.96rem; }
.main .town-news { position:absolute; top:12.64rem; left:50%; z-index:2; display:block; width:16.40rem; margin-left:-8.20rem; }
.main .town-news .title { display:block; height:1.28rem; background:url("../images/town-news-title.png?v=1.0.0") no-repeat 50% 50% / auto 100%; color:transparent; text-align:center; line-height:1.28rem; }
.main .town-news .content { display:block; height:10.56rem; background:url("../images/town-news-content.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; margin-top:0.40rem; }
.main .characters { position:absolute; top:26.20rem; left:50%; z-index:2; display:block; width:19.20rem; margin-left:-9.60rem; }
.main .characters .title { display:block; height:1.28rem; background:url("../images/characters-title.png?v=1.0.0") no-repeat 50% 50% / auto 100%; color:transparent; text-align:center; line-height:1.28rem; }
.main .characters .content { position:relative; display:block; height:11.28rem; margin-top:-0.40rem; }
.main .characters .content .characters-swiper { position:relative; display:block; width:100%; height:100%; }
.main .characters .content .characters-swiper .cardboard { position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; pointer-events:none; display:block; background:url("../images/characters-cardboard.png?v=1.0.0") no-repeat 50% 100% / 100% 100%; }
.main .characters .content .characters-swiper .paper { position:absolute; top:0; bottom:0; left:0; right:0; z-index:3; pointer-events:none; display:block; background:url("../images/characters-paper.png?v=1.0.0") no-repeat 50% 100% / 100% 100%; }
.main .characters .content .characters-swiper .swiper-pagination { position:absolute; top:0; bottom:0; left:0; right:0; z-index:2; }
.main .characters .content .characters-swiper .swiper-pagination .swiper-pagination-bullet { position:absolute; cursor:pointer; display:block; border-radius:0; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; background-size:100% 100%; margin:0; opacity:1; filter:contrast(0.5); transition:all 0.3s cubic-bezier(0.34,0.69,0.1,1); }
.main .characters .content .characters-swiper .swiper-pagination .swiper-pagination-bullet-active { opacity:1; filter:contrast(1); }
.main .characters .content .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(1) { top:1.60rem; left:0.60rem; width:2.80rem; height:2.18rem; background-image:url("../images/characters-group1-album.png?v=1.0.0"); }
.main .characters .content .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(2) { top:3.64rem; left:0.44rem; width:2.70rem; height:2.10rem; background-image:url("../images/characters-group2-album.png?v=1.0.0"); }
.main .characters .content .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(3) { top:5.52rem; left:0.16rem; width:3.12rem; height:2.52rem; background-image:url("../images/characters-group3-album.png?v=1.0.0"); }
.main .characters .content .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(4) { top:8.12rem; left:0.44rem; width:2.90rem; height:2.28rem; background-image:url("../images/characters-group4-album.png?v=1.0.0"); }
.main .characters .content .characters-swiper .swiper { position:absolute; top:0; bottom:0; left:2.16rem; right:0; z-index:4; }
.main .characters .content .characters-group { position:relative; display:block; width:100%; height:100%; }
.main .characters .content .characters-group .characters-group-imgs { position:relative; display:block; width:100%; height:100%; }
.main .characters .content .characters-group .characters-group-imgs .characters-group-img { position:absolute; top:0; bottom:0; left:0; right:0; display:block; width:100%; height:100%; opacity:0; transition:all 0.3s cubic-bezier(0.34,0.69,0.1,1); }
.main .characters .content .characters-group .characters-group-imgs .characters-group-img.active { opacity:1; }
.main .characters .content .characters-group .characters-group-photo { position:absolute; top:5.56rem; left:0.64rem; display:block; width:6.64rem; height:4.56rem; }
.main .characters .content .characters-group .characters-group-photo img { display:block; width:100%; height:100%; }
.main .characters .content .characters-group .characters-group-avatars { position:absolute; top:2.68rem; left:4.60rem; display:flex; flex-direction:row-reverse; justify-content:flex-start; align-items:center; transform:rotate(-1deg); }
.main .characters .content .characters-group .characters-group-avatars .characters-group-avatar { cursor:pointer; display:block; width:0.88rem; height:0.88rem; background-repeat:no-repeat; background-position:0 0; background-size:auto 100%; }
.main .characters .content .characters-group .characters-group-avatars .characters-group-avatar.active { background-position:-0.88rem 0; }
.main .characters .content .characters-group1 .characters-group-avatars .characters-group-avatar:nth-child(1) { background-image:url("../images/characters-group1-avatar1.png?v=1.0.0"); }
.main .characters .content .characters-group1 .characters-group-avatars .characters-group-avatar:nth-child(2) { background-image:url("../images/characters-group1-avatar2.png?v=1.0.0"); }
.main .characters .content .characters-group2 .characters-group-avatars .characters-group-avatar:nth-child(1) { background-image:url("../images/characters-group2-avatar1.png?v=1.0.0"); }
.main .characters .content .characters-group2 .characters-group-avatars .characters-group-avatar:nth-child(2) { background-image:url("../images/characters-group2-avatar2.png?v=1.0.0"); }
.main .characters .content .characters-group3 .characters-group-avatars .characters-group-avatar:nth-child(1) { background-image:url("../images/characters-group3-avatar1.png?v=1.0.0"); }
.main .characters .content .characters-group3 .characters-group-avatars .characters-group-avatar:nth-child(2) { background-image:url("../images/characters-group3-avatar2.png?v=1.0.0"); }
.main .characters .content .characters-group4 .characters-group-avatars .characters-group-avatar:nth-child(1) { background-image:url("../images/characters-group4-avatar1.png?v=1.0.0"); }
.main .characters .content .characters-group4 .characters-group-avatars .characters-group-avatar:nth-child(2) { background-image:url("../images/characters-group4-avatar2.png?v=1.0.0"); }
.main .features { position:absolute; top:39.80rem; left:50%; z-index:2; display:block; width:12.48rem; margin-left:-6.12rem; }
.main .features .title { display:block; height:1.28rem; background:url("../images/features-title.png?v=1.0.0") no-repeat 50% 50% / auto 100%; color:transparent; text-align:center; line-height:1.28rem; }
.main .features .content { display:block; height:7.66rem; margin-top:0.40rem; }
.main .features .content .features-swiper {  position:relative; display:block; width:100%; height:100%; }
.main .features .content .features-swiper .paper { position:absolute; top:0; bottom:0; left:0; right:0; z-index:2; pointer-events:none; display:block; background:url("../images/features-paper.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; }
.main .features .content .features-swiper .swiper-button-prev,
.main .features .content .features-swiper .swiper-button-next { position:absolute; top:50%; z-index:1; cursor:pointer; display:block; width:3.18rem; height:1.22rem; background:url("../images/features-swiper-button.png?v=1.0.0"); background-repeat:no-repeat; background-size:100% auto; margin-top:-0.61rem; color:transparent; text-align:center; line-height:1.22rem; }
.main .features .content .features-swiper .swiper-button-prev { left:-0.80rem; background-position:0 0; }
.main .features .content .features-swiper .swiper-button-next { right:-0.80rem; background-position:0 -1.22rem; }
.main .features .content .features-swiper .swiper-pagination { position:absolute; top:auto; bottom:-0.48rem; left:0; right:0; z-index:4; font-size:0; text-align:center; }
.main .features .content .features-swiper .swiper-pagination .swiper-pagination-bullet { display:inline-block; width:0.52rem; height:0.52rem; background:url("../images/features-swiper-pagination.png?v=1.0.0") no-repeat 0 0 / auto 100%; margin:0 0.08rem; opacity:1; }
.main .features .content .features-swiper .swiper-pagination .swiper-pagination-bullet-active { background-position:-0.52rem 0; }
.main .features .content .features-swiper .swiper { position:absolute; top:50%; left:50%; z-index:3; display:block; width:11.06rem; height:6.64rem; margin-left:-5.53rem; margin-top:-3.32rem; }
.main .features .content .features-swiper .swiper .swiper-wrapper .swiper-slide img { display:block; width:100%; height:100%; }
.main .windbell { position:absolute; top:12.84rem; left:0; z-index:2; pointer-events:none; display:block; width:3.02rem; height:5.50rem; background:url("../images/windbell.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; }
.main .pigeon { position:absolute; top:20.14rem; left:0; z-index:2; pointer-events:none; display:block; width:2.98rem; height:3.52rem; background:url("../images/pigeon.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; }
.main .stone { position:absolute; top:36.86rem; left:0; z-index:2; pointer-events:none; display:block; width:6.10rem; height:4.68rem; background:url("../images/stone.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; }

.footer { display:block; background-color:#1d1d1d; padding:0.32rem 0; }
.footer p { color:#e3e3e3; font-size:0.14rem; text-align:center; line-height:0.32rem; }
.footer a { color:inherit; }

.sidebar { position:fixed; top:50%; right:0.32rem; z-index:10; display:block; width:1.48rem; height:5.94rem; background:url("../images/sidebar.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; margin-top:-2.97rem; padding-top:1.30rem; }
.sidebar .anchor { display:block; width:100%; height:0.54rem; color:#538ca8; font-size:0.20rem; text-align:center; line-height:0.54rem; transition:color 0.3s cubic-bezier(0.34,0.69,0.1,1); }
.sidebar .anchor.active { background:url("../images/sidebar-anchor-active.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; color:#7e6442; }
.sidebar .btn-backtop { position:absolute; bottom:0; left:50%; cursor:pointer; display:block; width:0.68rem; height:0.68rem; margin-left:-0.34rem; }

.dialog-cadpa { display:block; width:9.00rem; height:5.74rem; background:url("../images/dialog-cadpa.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; }
.dialog-cadpa .content { display:block; width:100%; height:100%; padding:1.00rem 1.24rem 0 1.24rem; color:#333; font-size:0.16rem; text-align:left; line-height:2; }
.dialog-cadpa .btn-close { position:absolute; top:-0.48rem; right:0.16rem; width:1.08rem; height:1.08rem; background:url("../images/dialog-cadpa-btn-close.png?v=1.0.0") no-repeat 50% 50% / 100% 100%; }