@charset "UTF-8";
.home { position: relative; }

#pcHeader { display: none; }

#appHeader { width: 100%; height: 0.91rem; background: url(../../imgs/app/detail_header_bg.jpg) no-repeat center 0; background-size: auto 100%; position: fixed; left: 0; top: 0; z-index: 99; }
#appHeader .download { width: 1.84rem; height: 0.58rem; background: url(../../imgs/app/header_upload.png) no-repeat 0 0; background-size: contain; float: right; margin: 0.15rem 0.3rem 0 0; }
#appHeader .logo { float: left; margin: 0.1rem 0 0 0.26rem; display: flex; }
#appHeader .logo i { width: 1.11rem; height: 1.1rem; background: url(../../imgs/app/header_logo.png) no-repeat 0 0; background-size: contain; margin-right: 0.24rem; }
#appHeader .logo .name { flex: 1; color: #fff; }
#appHeader .logo .name p:nth-of-type(1) { font-size: 0.26rem; margin-top: 0.02rem; font-family: "NotoSansCJKsc-Regular"; }
#appHeader .logo .name p:nth-of-type(2) { font-size: 0.18rem; font-family: "DengXian-Light"; }

.part1 { width: 100%; height: 11.98rem; background: url(../../imgs/app/part_1_bg_beian.jpg) no-repeat 0 0; background-size: cover; overflow: hidden; }
.part1 .logo { width: 5.55rem; height: 3.25rem; position: absolute; left: 50%; top: 6.2rem; transform: translateX(-50%); }
.part1 .logo img { width: 100%; }
.part1 .pc-video-btn, .part1 .code, .part1 .btns { display: none; }
.part1 .app-btns { margin-top: 9.9rem; display: flex; justify-content: center; }
.part1 .app-btns .video-btn { width: 2.69rem; height: 1.27rem; background: url(../../imgs/app/part_1_video.png) no-repeat 0 0; background-size: contain; animation: btns 0.8s infinite alternate; }
.part1 .app-btns .app-download { width: 2.77rem; height: 0.71rem; background: url(../../imgs/app/part_1_upload.png) no-repeat 0 0; background-size: contain; margin: 0.25rem 0 0 0.35rem; animation: btns 0.8s infinite alternate; }

@keyframes btns { 0% { transform: scale(0.95, 0.95);
    /*缩放*/ }
  100% { transform: scale(1.05, 1.05);
    /*放大*/ } }
.game-introduce { width: 100%; height: 2.84rem; background: url(../../imgs/app/game_introduce_bg.jpg) no-repeat 0 0; background-size: cover; position: relative; }
.game-introduce .center { width: 6.69rem; background: url(../../imgs/app/game_introduce_center_bg.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 0 0.44rem 0.25rem; }
.game-introduce .center i { width: 0.1rem; height: 0.1rem; display: inline-block; background: url(../../imgs/pc/game_introduce_icon.png) no-repeat 0 0; background-size: cover; }
.game-introduce .center h1 { line-height: 0.8rem; font-size: 0.36rem; color: #ffca01; display: flex; align-items: center; justify-content: center; }
.game-introduce .center h1 span { margin: 0 0.1rem; font-family: 'SourceHanSansCN-Medium'; }
.game-introduce .center p { line-height: 0.4rem; font-size: 0.24rem; text-align: justify; color: #fff; }

.part2 { width: 100%; height: 12.23rem; background: url(../../imgs/app/part_2_bg_beian.jpg) no-repeat 0 0; background-size: cover; overflow: hidden; }
.part2 .title, .part2 .dw1, .part2 .dw2 { display: none; }
.part2 .news { width: 6.7rem; height: 8.88rem; background: url(../../imgs/app/part_2_center_bg.png) no-repeat 0 0; background-size: cover; margin: 3.3rem auto 0; overflow: hidden; }
.part2 .lunbo { width: 6.01rem; margin: 0.46rem auto 0; position: relative; }
.part2 .lunbo .icon { width: 0; height: 0; border-color: transparent #ffca01; /*上下颜色 左右颜色*/ border-width: 0.36rem 0.36rem 0 0; border-style: solid; position: absolute; right: 0; bottom: 0; z-index: 2; }
.part2 .lunbo a { display: inline-block; }
.part2 .lunbo .swiper-container { width: 6.01rem; height: 3.41rem; border: 2px solid #fff; margin: 0; box-shadow: 2px 2px 10px #046fda; }
.part2 .lunbo img { width: 6.01rem; height: 3.41rem; }
.part2 .swiper-pagination { margin-top: 0.22rem; width: 100%; }
.part2 .swiper-pagination .swiper-pagination-bullet { width: 0.72rem; height: 0.1rem; border-radius: 0; border: 1px solid #fff; opacity: 1; background-color: transparent; margin-right: 0.04rem; }
.part2 .swiper-pagination .swiper-pagination-bullet-active { background-color: #ffca01; border: 0; }
.part2 .list { width: 6rem; margin: 0.7rem auto 0; }
.part2 .list .list_nav { border-bottom: 0.02rem solid #fff; padding-bottom: 0.2rem; display: flex; }
.part2 .list .list_nav ul { display: flex; }
.part2 .list .list_nav li { width: 1.28rem; height: 0.52rem; line-height: 0.52rem; background: url(../../imgs/app/part_2_nav_bg.png) no-repeat 0 0; background-size: 100% 100%; text-align: center; font-size: 0.24rem; color: #fff; font-family: "NotoSansCJKsc-Regular"; }
.part2 .list .list_nav li.active { background-image: url(../../imgs/app/part_2_nav_bg_on.png); color: #409de0; }
.part2 .list .list_nav .more { width: 0.82rem; height: 0.53rem; border-radius: 0.05rem; background: #ffca01 url(../../imgs/app/part_2_nav_more.png) no-repeat center center; background-size: 0.24rem 0.24rem; display: inline-block; margin-left: 0.14rem; }
.part2 .list .notice, .part2 .list .content { display: none; }
.part2 .list .app-content li { width: 100%; height: 0.62rem; line-height: 0.62rem; background: url(../../imgs/app/part_2_list_bg.png) no-repeat 0 0; background-size: 100% 100%; font-size: 0.24rem; color: #fff; padding: 0 0.2rem 0 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; margin-top: 0.18rem; font-family: "NotoSansCJKsc-Regular"; }
.part2 .list .app-content li i { width: 0.84rem; height: 0.26rem; line-height: 0.26rem; background: url(../../imgs/app/part_2_new.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; left: 0.21rem; top: 0.16rem; font-size: 0.2rem; text-align: center; font-family: "NotoSansCJKsc-Bold"; }
.part2 .list a { color: #fff; display: inline-block; }

.part3 { width: 100%; height: 16.35rem; background: url(../../imgs/app/part_3_bg.jpg) no-repeat 0 0; background-size: cover; overflow: hidden; }
.part3 .title, .part3 .video, .part3 .toggle { display: none; }
.part3 .center { width: 6.7rem; height: 12.91rem; background: url(../../imgs/app/part_3_center_bg.png) no-repeat 0 0; background-size: cover; margin: 3.25rem auto 0; box-shadow: 2px 2px 10px #046fda; position: relative; }
.part3 .btns { position: absolute; top: 0.1rem; left: 50%; transform: translateX(-50%); z-index: 2; }
.part3 .btns > div { width: 3.5rem; height: 0.47rem; line-height: 0.48rem; background: url(../../imgs/app/part_3_toggle_bg.png) no-repeat 0 0; background-size: contain; color: #fdfbfb; font-size: 0.22rem; text-align: center; margin-top: 0.3rem; font-family: "NotoSansCJKsc-Black"; font-style: italic; }
.part3 .btns > div.active { color: #299aff; letter-spacing: 2px; font-size: 0.3rem; background-image: url(../../imgs/app/part_3_toggle_bg_on.png); }
.part3 .bg { width: 6.72rem; height: 6.5rem; background: url(../../imgs/app/part_3_rw_bg.png) no-repeat 0 0; background-size: cover; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; }
.part3 .rw-bg { width: 6.44rem; position: absolute; left: -0.28rem; top: -0.38rem; }
.part3 .rw-bg img { width: 100%; }
.part3 .name { font-size: 1.2rem; opacity: 0.9; font-weight: bold; font-style: italic; letter-spacing: -0.06rem; color: #ffffff; position: absolute; top: 4.5rem; left: 50%; transform: translateX(-50%); z-index: 2; font-family: "NotoSansCJKsc-Black"; }
.part3 .rw { width: 4.92rem; height: 6.9rem; z-index: 3; position: absolute; top: 1.6rem; left: 50%; margin-left: -2.46rem; animation: roles 8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; }
.part3 .rw img { width: 100%; }
.part3 .introduce { width: 6.07rem; background: url(../../imgs/pc/part_3_jieshao.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 8.7rem; left: 50%; transform: translateX(-50%); color: #fff; padding: 0 0.2rem 0.15rem; }
.part3 .introduce h1 { font-size: 0.98rem; font-weight: normal; font-style: italic; letter-spacing: 0.04rem; color: #ffffff; font-family: "NotoSansCJKsc-Bold"; }
.part3 .introduce h2 { font-size: 0.4rem; line-height: 0.4rem; font-weight: normal; font-style: italic; letter-spacing: 0.02rem; color: #ffca01; margin: -0.25rem 0 -2px 0; padding-right: 0.1rem; text-align: right; width: 2.45rem; font-family: "NotoSansCJKsc-Black"; }
.part3 .introduce h3 { font-size: 0.26rem; font-family: "NotoSansCJKsc-Black"; margin-top: 0.2rem; margin-bottom: 0.1rem; }
.part3 .introduce .desc-content p { font-size: 0.19rem; font-weight: normal; font-style: italic; letter-spacing: 0.01rem; color: #ffffff; font-family: "NotoSansCJKsc-Medium"; display: flex; }
.part3 .introduce .desc-content p .desc { flex: 1; }
.part3 .introduce .line { width: 2.45rem; height: 0.06rem; background-color: #ffca01; }
.part3 .protagonist .toggle-left, .part3 .protagonist .toggle-right { width: 1.55rem; height: 6rem; background: url(../../imgs/app/part_3_left_icon.png) no-repeat right bottom; background-size: 0.97rem 0.67rem; position: absolute; left: 50%; top: 2rem; margin-left: -3.5rem; z-index: 4; }
.part3 .protagonist .toggle-right { background-position: left bottom; margin-left: 2rem; background-image: url(../../imgs/app/part_3_right_icon.png); }

.part4 { width: 100%; height: 11.81rem; background: url(../../imgs/app/part_4_bg.jpg) no-repeat 0 0; background-size: cover; overflow: hidden; }
.part4 .title, .part4 .dw { display: none; }
.part4 .center { width: 6.7rem; height: 8.51rem; background: url(../../imgs/app/part_4_center_bg.png) no-repeat 0 0; background-size: cover; margin: 3.05rem auto 0; overflow: hidden; box-shadow: 2px 2px 10px #046fda; }
.part4 .show { width: 6.07rem; height: 3.3rem; margin: 0.62rem auto 0; box-shadow: 2px 2px 10px #046fda; }
.part4 .show img { width: 100%; }
.part4 ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0.27rem 0.38rem; }
.part4 ul li { width: 2.85rem; height: 1.55rem; margin: 0.13rem 0.06rem; position: relative; }
.part4 ul li img { width: 100%; }
.part4 ul li.active::after { content: ''; width: 2.85rem; height: 1.55rem; position: absolute; left: 0; top: 0; background: url(../../imgs/pc/part_4_img_hover.png) no-repeat 0 0; background-size: 100% 100%; opacity: 0.67; }

.part5 { width: 100%; height: 6.98rem; background: url(../../imgs/app/part_5_bg.jpg) no-repeat 0 0; background-size: cover; overflow: hidden; }
.part5 .title, .part5 .dw, .part5 .center { display: none; }
.part5 .app-center { width: 6.7rem; height: 2.57rem; background: url(../../imgs/app/part_5_center_bg.png) no-repeat 0 0; background-size: cover; margin: 2.8rem auto 0; overflow: hidden; box-shadow: 2px 2px 10px #046fda; display: flex; justify-content: center; padding-top: 0.17rem; }
.part5 .app-center .code { width: 2.13rem; height: 2.16rem; margin-right: 1rem; }
.part5 .app-center .code img { width: 100%; }
.part5 .app-center .link { text-align: center; }
.part5 .app-center .link a { display: block; margin-bottom: 0.22rem; }
.part5 .app-center .link a:nth-of-type(1) { margin-top: 0.12rem; }
.part5 .app-center .link i { width: 0.57rem; height: 0.52rem; background: url(../../imgs/app/part_5_icon_gf.png) no-repeat 0 0; background-size: contain; display: inline-block; }
.part5 .app-center .link i.wb { width: 0.66rem; height: 0.51rem; background-image: url(../../imgs/app/part_5_icon_wb.png); }
.part5 .app-center .link p { color: #fff; font-size: 0.24rem; font-family: "SourceHanSansCN-Regular"; }

#footer { display: none; }

.video-shadow { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); position: fixed; left: 0; top: 0; z-index: 99; display: none; }
.video-shadow .box { width: 7.1rem; height: 3.98rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; }
.video-shadow .close { width: 0.79rem; height: 0.79rem; background: url(../../imgs/app/video_close_btn.jpg) no-repeat 0 0; background-size: contain; position: absolute; right: 0; top: -0.8rem; cursor: pointer; }
.video-shadow video { width: 100%; height: 100%; }
.video-shadow .paused { width: 0.96rem; height: 1.19rem; background: url(../../imgs/app/video_stop.png) no-repeat 0 0; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

@keyframes roles { 0% { transform: translateY(0rem); }
  30% { transform: translateY(-0.2rem); }
  60% { transform: translate(-0.1rem, 0.1rem); }
  80% { transform: translate(0.1rem, -0.2rem); }
  100% { transform: translate(0.2rem, 0.2rem); } }