/* 样式 */
.app { display:block; }

.app-header { position:relative; z-index:2; display:flex; justify-content:flex-start; align-items:center; height:88px; background-color:#1c1e1e; background:#1c1e1e url("../images/app-header.png") no-repeat 50% 0%; padding:0 56px; }
.app-header .logo { position:absolute; top:6px; left:56px; display:block; width:108px; height:108px; }
.app-header .logo a,
.app-header .logo img { display:block; width:100%; height:100%; }
.app-header .name { position:absolute; top:6px; left:184px; display:block; width:168px; height:76px; background:url("../images/name.png") no-repeat 50% 50%; background-size:100% 100%; color:transparent; text-align:center; line-height:76px; }

.app-body { position:relative; z-index:1; display:block; height:3288px; }
.app-body .bgs { position:absolute; top:0; left:0; right:0; z-index:1; }
.app-body .bgs .bg { display:block; height:1096px; background-repeat:no-repeat; background-position:50% 0%; }
.app-body .bgs .bg.bg1 { background-image:url("../images/bg1.png"); }
.app-body .bgs .bg.bg2 { background-image:url("../images/bg2.png"); }
.app-body .bgs .bg.bg3 { background-image:url("../images/bg3.png"); }
.app-body .link-group { position:absolute; top:48px; right:48px; z-index:2; }
.app-body .link-group .link { display:block; width:88px; height:88px; background-repeat:no-repeat; background-position:50% 50%; filter:drop-shadow(0 4px 2px rgba(48,18,0,0.5)); color:transparent; text-align:center; line-height:88px; }
.app-body .link-group .link.link-taptap { background-image:url("../images/link-taptap.png"); }
.app-body .link-group .link.link-bilibili { background-image:url("../images/link-bilibili.png"); margin-top:24px; }
.app-body .link-group .link-mumu { position:absolute; left:-32px; top:224px; width:150px; }
.app-body .link-group .link-mumu img { display:block; width:100%; }
.app-body .slogan { position:absolute; top:468px; left:50%; z-index:2; display:block; width:920px; height:332px; background:url("../images/slogan.png") no-repeat 50% 50%; margin-left:-460px; color:transparent; text-align:center; line-height:332px; }
.app-body .btn-movie { position:absolute; top:666px; left:calc(50% - 366px); z-index:2; display:block; width:98px; height:94px; background:url("../images/btn-movie.png") no-repeat 50% 50%; color:transparent; text-align:center; line-height:94px; }
.app-body .action-btns { position:absolute; top:784px; width:100%; z-index:2; display:flex; align-items:center; justify-content:center; }
.app-body .btn-subscribe { display:block; width:368px; height:102px; background:url("../images/btn-subscribe.png") no-repeat 50% 0; filter:drop-shadow(0 4px 2px rgba(48,18,0,0.5)); color:transparent; text-align:center; line-height:102px; }
.app-body .btn-subscribe.disabled { cursor:not-allowed; pointer-events:none; background-position:50% -102px; }
.app-body .btn-download { display:block; width:368px; height:102px; background:url("../images/download-btn.png") no-repeat 50% 0; filter:drop-shadow(0 4px 2px rgba(48,18,0,0.5)); color:transparent; text-align:center; line-height:102px; margin-left:30px; }

.app-body .characters { position:absolute; top:1360px; left:50%; z-index:2; display:block; width:1096px; height:856px; margin-left:-548px; }
.app-body .characters .characters-swiper { position:relative; display:block; width:100%; height:100%; }
.app-body .characters .characters-swiper .swiper { display:block; width:100%; height:100%; background:url("../images/characters-swiper.png") no-repeat 50% 50%; }
.app-body .characters .characters-swiper .swiper .swiper-wrapper .swiper-slide img { display:block; width:100%; height:100%; -webkit-touch-callout:none; -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.app-body .characters .characters-swiper .swiper-button-prev,
.app-body .characters .characters-swiper .swiper-button-next { position:absolute; top:50%; z-index:2; width:60px; height:66px; background-image:url("../images/characters-swiper-navigation.png"); background-repeat:no-repeat; margin-top:-33px; color:transparent; }
.app-body .characters .characters-swiper .swiper-button-prev { left:-100px; background-position:0 0; }
.app-body .characters .characters-swiper .swiper-button-next { right:-100px; background-position:-60px 0; }
.app-body .characters .characters-swiper .swiper-pagination { position:absolute; top:0; bottom:auto; left:0; right:0; z-index:2; font-size:0; text-align:center; }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet { position:absolute; display:inline-block; width:106px; height:106px; background-color:transparent; background-repeat:no-repeat; background-position:0 0; margin:0; opacity:1; }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color:transparent; background-position:-106px 0; }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(1) { top:98px; left:856px; background-image:url("../images/characters-swiper-pagination-bullet1.png"); }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {  }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(2) { top:184px; left:930px; background-image:url("../images/characters-swiper-pagination-bullet2.png"); }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active {  }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(3) { top:288px; left:976px; background-image:url("../images/characters-swiper-pagination-bullet3.png"); }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active {  }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(4) { top:400px; left:988px; background-image:url("../images/characters-swiper-pagination-bullet4.png"); }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active {  }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(5) { top:514px; left:968px; background-image:url("../images/characters-swiper-pagination-bullet5.png"); }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(5).swiper-pagination-bullet-active {  }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(6) { top:616px; left:914px; background-image:url("../images/characters-swiper-pagination-bullet6.png"); }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(6).swiper-pagination-bullet-active {  }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(7) { top:698px; left:834px; background-image:url("../images/characters-swiper-pagination-bullet7.png"); }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(7).swiper-pagination-bullet-active {  }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(8) { top:752px; left:730px; background-image:url("../images/characters-swiper-pagination-bullet8.png"); }
.app-body .characters .characters-swiper .swiper-pagination .swiper-pagination-bullet:nth-child(8).swiper-pagination-bullet-active {  }
.app-body .features { position:absolute; top:2600px; left:50%; z-index:2; display:block; width:976px; height:556px; margin-left:-488px; }
.app-body .features .features-swiper { position:relative; display:block; width:100%; height:100%; }
.app-body .features .features-swiper .swiper { display:block; width:100%; height:100%; border:8px solid transparent; background:#603b2a url("../images/features-swiper.png") no-repeat 50% 50%; box-shadow:0 2px 8px 4px rgba(48,18,0,0.25); }
.app-body .features .features-swiper .swiper .swiper-wrapper .swiper-slide img { display:block; width:100%; height:100%; -webkit-touch-callout:none; -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.app-body .features .features-swiper .swiper-button-prev,
.app-body .features .features-swiper .swiper-button-next { position:absolute; top:50%; z-index:2; width:60px; height:66px; background-image:url("../images/features-swiper-navigation.png"); background-repeat:no-repeat; margin-top:-33px; color:transparent; }
.app-body .features .features-swiper .swiper-button-prev { left:-100px; background-position:0 0; }
.app-body .features .features-swiper .swiper-button-next { right:-100px; background-position:-60px 0; }
.app-body .features .features-swiper .swiper-pagination { position:absolute; top:auto; bottom:-60px; left:0; right:0; z-index:2; font-size:0; text-align:center; }
.app-body .features .features-swiper .swiper-pagination .swiper-pagination-bullet { display:inline-block; width:20px; height:20px; background:url("../images/features-swiper-pagination.png") no-repeat 0 0; margin:0 16px; opacity:1; }
.app-body .features .features-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-position:-20px 0; }

.app-footer { position:relative; display:block; background-color:#363636; padding:48px 0; }
.app-footer p { display:block; color:#fff; font-size:14px; text-align:center; line-height:28px; }
.app-footer .cadpa { position:absolute; top:71px; left:calc(50% - 264px); display:block; width:50px; height:64px; background:url("../images/cadpa.png") no-repeat 50% 50%; }

/* 宣传视频 */
.dialog-player { position:relative; display:block; width:1040px; height:586px; background-color:#000; }
.dialog-player .content { display:block; width:100%; height:100%; }
.dialog-player .content video { display:block; width:100%; height:100%; border:none; background-color:#000; overflow:hidden; }
.dialog-player .content iframe { display:block; width:100%; height:100%; border:none; background-color:#000; overflow:hidden; }
.dialog-player .btn-close { position:absolute; top:-20px; right:-20px; display:flex; justify-content:center; align-items:center; width:40px; height:40px; border-radius:20px; background-color:#98513d; color:#f9f0be; font-size:20px; text-align:center; line-height:1; }

/* 立即预约 */
.dialog-subscribe { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; width:756px; height:500px; background:url("../images/dialog.png") no-repeat 50% 0%; padding:58px 8px 8px 8px; }
.dialog-subscribe .content { display:block; }
.dialog-subscribe .content .form { display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:40px; width:590px; margin-bottom:48px; }
.dialog-subscribe .content .form .form-item { display:block; }
.dialog-subscribe .content .form .form-item .form-item-control { display:flex; justify-content:flex-start; align-items:center; gap:40px; }
.dialog-subscribe .content .form .form-item .form-item-control .input { flex:1; display:block; width:0; height:64px; border:none; background-color:#d7cab4; padding:0 20px; color:#000; font-size:28px; text-align:left; }
.dialog-subscribe .content .form .form-item .form-item-control .btn-captcha { cursor:pointer; display:block; width:260px; height:64px; border:none; background:url("../images/form-btn-captcha.png?v=1.0.0") no-repeat 50% 50%; color:#f9f0bb; font-size:28px; text-align:center; line-height:64px; }
.dialog-subscribe .content .form .form-item .form-item-control .btn-captcha.disabled { cursor:not-allowed; pointer-events:none; }
.dialog-subscribe .content .btn-subscribe { cursor:pointer; display:block; width:340px; height:64px; border:none; background:url("../images/form-btn-subscribe.png") no-repeat 50% 50%; margin:0 auto; color:#f9f0bb; font-size:28px; text-align:center; line-height:64px; }
.dialog-subscribe .content .btn-subscribe.disabled { cursor:not-allowed; pointer-events:none; }
.dialog-subscribe .btn-close { position:absolute; top:-4px; right:16px; display:block; width:76px; height:128px; background:url("../images/dialog-btn-close.png") no-repeat 50% 50%; }

/* 预约成功 */
.dialog-subscribe-result { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; width:756px; height:500px; background:url("../images/dialog.png") no-repeat 50% 0%; padding:58px 8px 8px 8px; }
.dialog-subscribe-result .content { display:block; }
.dialog-subscribe-result .content .subscribe-result { display:block; width:740px; }
.dialog-subscribe-result .content .subscribe-result .subscribe-result-header { display:block; background:url("../images/subscribe-result-header.png") no-repeat 50% 100%; margin-bottom:24px; padding-bottom:40px; color:#3d2f1d; font-size:32px; text-align:center; line-height:1; }
.dialog-subscribe-result .content .subscribe-result .subscribe-result-body { display:block; width:588px; height:196px; background:url("../images/subscribe-result-body.png") no-repeat 50% 50%; margin:0 auto; color:#3d2f1d; font-size:48px; text-align:center; line-height:196px; }
.dialog-subscribe-result .btn-close { position:absolute; top:-4px; right:16px; display:block; width:76px; height:128px; background:url("../images/dialog-btn-close.png") no-repeat 50% 50%; }

/* 适龄提示 */
.dialog-cadpa { display:block; width:600px; border-radius:4px; background-color:#fff; padding:32px; }
.dialog-cadpa .title { display:block; color:#333; font-size:24px; text-align:center; line-height:2; }
.dialog-cadpa .content { display:block; margin-top:24px; color:#333; font-size:16px; text-align:left; line-height:2; }
.dialog-cadpa .btn-close { position:absolute; top:-20px; right:-20px; display:flex; justify-content:center; align-items:center; width:40px; height:40px; border-radius:20px; background-color:#98513d; color:#f9f0be; font-size:20px; text-align:center; line-height:1; }