@charset "UTF-8";
.app-header { display: none; }

.pc-header { height: 0.96rem; background-color: #000000; position: relative; z-index: 2; }
.pc-header .logo { height: 1.5rem; position: absolute; left: 1.01rem; top: 0; }
.pc-header ul { position: absolute; right: 0; top: 0; }
.pc-header ul li { width: 1.4rem; height: 0.96rem; float: left; font-size: 0.37rem; font-weight: normal; font-style: italic; color: #fff; letter-spacing: -0.03rem; position: relative; margin-right: 0.85rem; font-family: "zihun181hao-feichibiaotiti"; cursor: pointer; }
.pc-header ul li:nth-last-of-type(1) { margin-right: 0.7rem; }
.pc-header ul li span { position: absolute; top: 0.26rem; left: 0; display: inline-block; z-index: 2; font-size: 0.37rem; }
.pc-header ul li::after { content: ''; width: 100%; height: 0.1rem; background-color: #299aff; position: absolute; top: 0.58rem; left: 0; }
.pc-header ul li.active { color: #299aff; }
.pc-header ul li.active::after { background-color: #ffca01; }

.footer { background-color: #000; padding: 0.6rem 0; color: #fff; display: flex; font-family: "NotoSansCJKsc-Regular"; }
.footer .center { margin: 0 auto; }
.footer .tp { height: 0.5rem; margin-bottom: 0.15rem; display: flex; align-items: center; }
.footer .logo { padding: 0 0.28rem; display: inline-block; }
.footer .logo:nth-of-type(1) { border-right: 1px solid #fff; padding-left: 0; }
.footer span { font-size: 0.16rem; }
.footer .link { margin-right: 0.4rem; }
.footer .link a { color: #fff; border-right: 1px solid #fff; padding: 0 0.12rem; font-size: 0.18rem; }
.footer .link a:nth-last-of-type(1) { border: 0; }
.footer .link a:nth-of-type(1) { padding-left: 0; }
.footer .link a:hover { color: #218ff9; }
.footer img { height: 0.5rem; }
.footer p { margin-bottom: 0.1rem; font-size: 0.16rem; font-family: "NotoSansCJKsc-Regular"; }

#appHeader { display: none; }

.home { overflow: hidden; }

.part1 { width: 100%; height: 10.09rem; background: url(../../imgs/pc/part_1_bg_beian.jpg) no-repeat 0 0; background-size: cover; position: relative; }
.part1 .logo { width: 7.31rem; height: 4.86rem; position: absolute; left: 50%; top: 2.5rem; transform: translateX(-50%); }
.part1 .logo img { width: 100%; }
.part1 .download { width: 7.18rem; height: 2.06rem; background: url(../../imgs/pc/part_1_upload_bg.png) no-repeat center 0; background-size: cover; margin-top: 7rem; display: flex; justify-content: center; padding-top: 0.18rem; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; }
.part1 .download .video-btn { width: 1.98rem; height: 1.33rem; cursor: pointer; position: relative; }
.part1 .download .video-btn img { width: 100%; }
.part1 .download .video-btn i { position: absolute; left: 50%; top: 50%; margin-left: -0.28rem; margin-top: -0.3rem; background: url(../../imgs/pc/part_1_video_playIcon.png) no-repeat 0 0; background-size: contain; width: 0.56rem; height: 0.61rem; animation: btns 0.8s infinite alternate; }
.part1 .download .code { width: 1.17rem; margin: 0 0.2rem; text-align: center; position: relative; }
.part1 .download .code .line { width: 1.07rem; height: 0.03rem; background: url(../../imgs/pc/part_1_code_line.png) no-repeat 0 0; background-size: contain; position: absolute; left: 0; top: 0; animation: codeLine 1.5s ease infinite alternate; }
.part1 .download .code img { width: 100%; height: 1.17rem; border: 0.05rem solid #fee839; border-radius: 0.06rem; }
.part1 .download .code span { color: #fff; font-size: 0.18rem; font-family: "NotoSansCJKsc-Medium"; }
.part1 .download .btns a { width: 1.92rem; height: 0.6rem; background: url(../../imgs/pc/part_1_an.png) no-repeat center 0; background-size: contain; display: block; position: relative; }
.part1 .download .btns a:hover::after { content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); border-radius: 0.05rem; position: absolute; left: 0; top: 0; }
.part1 .download .btns .apple { background-image: url(../../imgs/pc/part_1_app.png); margin-bottom: 0.1rem; }
.part1 .download .app-btns { display: none; }

.game-introduce { width: 100%; height: 2.08rem; background: url(../../imgs/pc/game_introduce_bg.jpg) no-repeat 0 0; background-size: cover; position: relative; z-index: 2; }
.game-introduce .center { width: 8.41rem; background: url(../../imgs/pc/game_introduce_center_bg.png) no-repeat 0 0; background-size: 100% 100%; padding: 0.35rem 0.6rem; position: absolute; left: 50%; margin-left: -4.2rem; box-shadow: 2px 2px 10px #046fda; }
.game-introduce .center i { width: 0.09rem; height: 0.09rem; display: inline-block; background: url(../../imgs/pc/game_introduce_icon.png) no-repeat 0 0; background-size: cover; }
.game-introduce .center h1 { font-size: 0.2rem; line-height: 0.2rem; color: #ffca01; display: flex; align-items: center; padding-bottom: 0.2rem; }
.game-introduce .center h1 span { margin: 0 0.1rem; }
.game-introduce .center p { line-height: 0.4rem; font-size: 0.15rem; color: #fff; text-align: justify; }

.part2 { width: 100%; height: 7.6rem; background: url(../../imgs/pc/part_2_bg.jpg) no-repeat 0 0; background-size: cover; display: inline-block; position: relative; }
.part2 .title { width: 3.42rem; margin: 2.55rem auto 0; }
.part2 .title img { width: 100%; }
.part2 .dw1, .part2 .dw2 { width: 4.35rem; height: 5.87rem; background: url(../../imgs/pc/part_2_dw1.png) no-repeat 0 0; background-size: contain; position: absolute; left: -2.7rem; top: 5.35rem; transition: 1.2s all ease-out; opacity: 0; }
.part2 .dw1.on, .part2 .on.dw2 { left: -0.7rem; top: 1.35rem; opacity: 1; }
.part2 .dw2 { width: 5.22rem; height: 5.96rem; background-image: url(../../imgs/pc/part_2_dw2.png); top: 5rem; right: -4rem; left: auto; transition: 1.2s all ease-out; opacity: 0; }
.part2 .dw2.on { top: 2rem; right: -1.4rem; left: auto; opacity: 1; }
.part2 .news { width: 14.75rem; height: 3.91rem; background: url(../../imgs/pc/part_2_center_bg.png) no-repeat 0 0; background-size: contain; position: absolute; top: 3.65rem; left: 50%; margin-left: -7.37rem; padding-top: 0.7rem; display: flex; justify-content: center; z-index: 2; }
.part2 .lunbo { width: 4.5rem; 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; top: 2.2rem; z-index: 2; }
.part2 .lunbo .swiper-container { width: 4.5rem; height: 2.55rem; border: 2px solid #fff; margin: 0; box-shadow: 2px 2px 10px #046fda; }
.part2 .lunbo .swiper-slide img { width: 100%; }
.part2 .lunbo .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; margin-top: 0.1rem; }
.part2 .lunbo .swiper-pagination .swiper-pagination-bullet-active { background-color: #ffca01; border: 0; }
.part2 .list { width: 6.6rem; margin-left: 0.6rem; }
.part2 .list .list_nav { width: 6.44rem; padding-bottom: 0.08rem; border-bottom: 0.02rem solid #fff; overflow: hidden; }
.part2 .list .list_nav ul { overflow: hidden; float: left; margin-top: 0.08rem; }
.part2 .list .list_nav li { width: 0.82rem; height: 0.27rem; line-height: 0.27rem; text-align: center; background: url(../../imgs/pc/part_2_nav.png) no-repeat 0 0; background-size: contain; color: #299aff; font-size: 0.12rem; float: left; cursor: pointer; font-family: "NotoSansCJKsc-Bold"; }
.part2 .list .list_nav li.active { color: #fff; background-image: url(../../imgs/pc/part_2_nav_on.png); }
.part2 .list .list_nav .more { width: 0.65rem; height: 0.38rem; background: #ffca01 url(../../imgs/pc/part_2_nav_more.png) no-repeat center center; background-size: 0.15rem 0.15rem; border-radius: 0.05rem; float: right; cursor: pointer; }
.part2 .list .app-content { display: none; }
.part2 .list .content { display: flex; margin-top: 0.45rem; margin-right: -0.05rem; font-family: "NotoSansCJKsc-Regular"; }
.part2 .list .content li { width: 2.09rem; height: 1.17rem; font-size: 0.12rem; background: url(../../imgs/pc/part_2_content_bg.png) no-repeat 0 0; background-size: contain; cursor: pointer; margin-left: 0.08rem; overflow: hidden; padding: 0.2rem 0.15rem 0.05rem 0.25rem; box-shadow: 1px 1px 8px #4d9be0; }
.part2 .list .content li a { display: inline-block; color: #fff; }
.part2 .list .content li h1 { font-size: 0.15rem; margin-bottom: 0.08rem; display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; }
.part2 .list .content li p:nth-of-type(1) { display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; }
.part2 .list .content li p:nth-of-type(2) { color: #ffca01; margin-top: 0.08rem; }
.part2 .list .content li:hover { background-image: url(../../imgs/pc/part_2_content_bg_on.png); }
.part2 .list .notice { width: 6.42rem; height: 0.32rem; line-height: 0.32rem; font-size: 0.15rem; color: #fff; background: url(../../imgs/pc/part_2_news_bg.png) no-repeat 0 0; background-size: contain; margin-top: 0.15rem; margin-left: 0.15rem; padding: 0 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "NotoSansCJKsc-Regular"; }

@media screen and (max-width: 1630px) { .part2 .list .content li p:nth-of-type(1) { -webkit-line-clamp: 1; } }
@media screen and (max-width: 1300px) { .part2 .list .content li p:nth-of-type(1) { display: none; } }
.part3 { width: 100%; height: 16.21rem; background: url(../../imgs/pc/part_3_bg.jpg) no-repeat 0 0; background-size: cover; display: inline-block; position: relative; }
.part3 .title { width: 3.42rem; margin: 3.3rem auto 0; }
.part3 .title img { width: 100%; }
.part3 .center { width: 14.75rem; height: 11.52rem; background: url(../../imgs/pc/part_3_center_bg.png) no-repeat 0 0; background-size: contain; margin: 0.45rem auto 0; box-shadow: 2px 2px 12px #046fda; overflow: hidden; position: relative; }
.part3 .btns { display: flex; justify-content: center; position: absolute; top: 0.54rem; left: 50%; transform: translateX(-50%); z-index: 2; }
.part3 .btns > div { width: 3.51rem; height: 0.48rem; line-height: 0.48rem; background: url(../../imgs/pc/part_3_btn.png) no-repeat 0 0; background-size: contain; color: #fdfbfb; font-size: 0.22rem; text-align: center; margin: 0 0.19rem; font-family: "NotoSansCJKsc-Black"; font-style: italic; cursor: pointer; }
.part3 .btns > div.active { color: #299aff; letter-spacing: 2px; font-size: 0.28rem; background-image: url(../../imgs/pc/part_3_btn_on.png); }
.part3 .protagonist .bg { width: 7.1rem; height: 6.99rem; background: url(../../imgs/pc/part_3_rw_bg.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; }
.part3 .protagonist .name { font-size: 2.39rem; opacity: 0.9; font-weight: bold; font-style: italic; letter-spacing: -0.11rem; color: #ffffff; position: absolute; top: 50%; left: 48%; transform: translate(-50%, -50%); z-index: 2; font-family: "NotoSansCJKsc-Black"; }
.part3 .protagonist .video { width: 2.96rem; height: 1.66rem; position: absolute; right: 1.8rem; top: 7.44rem; }
.part3 .protagonist .video img { width: 100%; }
.part3 .protagonist .rw-bg { width: 8.57rem; position: absolute; left: -0.3rem; top: -0.4rem; }
.part3 .protagonist .rw-bg img { width: 100%; }
.part3 .protagonist .rw { width: 7.09rem; position: absolute; top: 1rem; left: 50%; margin-left: -3.54rem; z-index: 4; animation: roles 10s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; }
.part3 .protagonist .rw img { width: 100%; }
.part3 .protagonist .introduce { width: 3.51rem; background: url(../../imgs/pc/part_3_jieshao.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 1.65rem; right: 1.42rem; color: #fff; padding: 0 0.2rem 0.2rem 0.2rem; }
.part3 .protagonist .introduce h1 { font-size: 0.57rem; font-weight: normal; font-style: italic; letter-spacing: 0.04rem; color: #ffffff; font-family: "NotoSansCJKsc-Bold"; }
.part3 .protagonist .introduce h2 { font-size: 0.3rem; line-height: 0.3rem; font-weight: normal; font-style: italic; letter-spacing: 0.02rem; color: #ffca01; margin: -0.15rem 0 -0.05rem 0; padding-left: 0.4rem; font-family: "NotoSansCJKsc-Black"; }
.part3 .protagonist .introduce h3 { font-family: "NotoSansCJKsc-Black"; margin-top: 0.1rem; margin-bottom: 0.05rem; font-size: 0.15rem; }
.part3 .protagonist .introduce .desc-content p { font-size: 0.14rem; font-style: italic; letter-spacing: 0.01rem; color: #ffffff; font-family: "NotoSansCJKsc-Medium"; display: flex; }
.part3 .protagonist .introduce .desc-content p .desc { flex: 1; }
.part3 .protagonist .introduce .line { width: 1.4rem; height: 0.04rem; background-color: #ffca01; }
.part3 .toggle-left, .part3 .toggle-right { display: none; }
.part3 .toggle { width: 5.68rem; height: 1.35rem; background: url(../../imgs/pc/part_3_carousel_bg.png) no-repeat center 0; background-size: 100% 100%; position: absolute; bottom: 0.88rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding: 0 0.57rem; }
.part3 .toggle li { width: 0.66rem; height: 0.66rem; margin: 0 0.05rem; transition: 0.2s all; cursor: pointer; }
.part3 .toggle li:hover { transform: scale(1.3); }
.part3 .toggle li img { width: 100%; }
.part3 .toggle li.big { width: 1.15rem; height: 1.15rem; margin: 0 0.2rem 0 0.24rem; }
.part3 .toggle li.big:hover { transform: none; }

.part4 { width: 100%; height: 12.06rem; background: url(../../imgs/pc/part_4_bg.jpg) no-repeat 0 0; background-size: cover; display: inline-block; position: relative; }
.part4 .title { width: 3.42rem; margin: 3.3rem auto 0; }
.part4 .title img { width: 100%; }
.part4 .center { width: 14.75rem; height: 7.31rem; background: url(../../imgs/pc/part_4_center_bg.png) no-repeat 0 0; background-size: contain; margin: 0.45rem auto 0; overflow: hidden; padding-left: 1.3rem; box-shadow: 2px 2px 12px #046fda; }
.part4 .dw { width: 7.02rem; height: 7.99rem; background: url(../../imgs/pc/part_4_rw1.png) no-repeat 0 0; background-size: contain; position: absolute; right: 6.36rem; top: 7.9rem; z-index: 2; opacity: 1; transition: 1.2s all ease-out; }
.part4 .dw.on { opacity: 1; right: 2.36rem; top: 3.9rem; }
.part4 .show { width: 6.87rem; height: 3.72rem; margin-top: 1.1rem; box-shadow: 2px 2px 12px #046fda; }
.part4 .show img { width: 100%; }
.part4 ul { width: 6.87rem; height: 1.21rem; background: url(../../imgs/pc/part_4_imgs_bg.png) no-repeat 0 0; background-size: contain; display: flex; align-items: center; justify-content: center; margin-top: 0.3rem; }
.part4 ul li { width: 1.58rem; height: 0.86rem; background: url(../../imgs/pc/part_4_imgs_bg.png) no-repeat 0 0; background-size: 100% 100%; margin-right: 0.05rem; position: relative; cursor: pointer; }
.part4 ul li img { width: 100%; }
.part4 ul li:nth-last-of-type(1) { margin-right: 0; }
.part4 ul li.active::after { content: ''; width: 1.58rem; height: 0.86rem; 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: 10.46rem; background: url(../../imgs/pc/part_5_bg.jpg) no-repeat 0 0; background-size: cover; display: inline-block; position: relative; }
.part5 .title { width: 3.5rem; margin: 3.5rem auto 0; }
.part5 .title img { width: 100%; }
.part5 .dw { width: 5.5rem; height: 7.25rem; background: url(../../imgs/pc/part_5_dw1.png) no-repeat 0 0; background-size: contain; position: absolute; left: 6.3rem; top: 3.5rem; z-index: 2; transition: 1.2s all ease-out; opacity: 0; }
.part5 .dw.on { left: 1.3rem; top: 2.5rem; opacity: 1; }
.part5 .app-center { display: none; }
.part5 .center { width: 14.75rem; height: 4.95rem; background: url(../../imgs/pc/part_5_center_bg.png) no-repeat 0 0; background-size: contain; margin: 0.5rem auto 0; box-shadow: 2px 2px 12px #046fda; display: flex; align-items: center; padding-left: 5.64rem; }
.part5 .center .code.active img { top: 0.02rem; }
.part5 .code { width: 2.42rem; height: 2.47rem; background: url(../../imgs/pc/part_5_link_bg.png) no-repeat 0 0; background-size: contain; position: relative; cursor: pointer; margin: 0 0.2rem; overflow: hidden; }
.part5 .code img { width: 100%; position: absolute; left: 0; top: 100%; z-index: 2; transition: 0.3s all ease-out; }
.part5 .code span { color: #fff; width: 1.5rem; height: 0.36rem; line-height: 0.36rem; text-align: center; font-size: 0.25rem; position: absolute; bottom: 0.05rem; left: 0.05rem; background-color: #ffca01; font-style: italic; font-family: "NotoSansCJKsc-Bold"; }
.part5 .code i { width: 1.04rem; height: 0.85rem; background: url(../../imgs/pc/part_5_wx.png) no-repeat 0 0; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.part5 .code i.wb { width: 1.21rem; height: 0.97rem; background-image: url(../../imgs/pc/part_5_wb.png); }
.part5 .code i.lt { width: 1.01rem; height: 0.91rem; background-image: url(../../imgs/pc/part_5_lt.png); }

.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: 11.75rem; height: 6.55rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; }
.video-shadow .close { width: 0.9rem; height: 0.9rem; background: url(../../imgs/pc/video_close_btn.png) no-repeat 0 0; background-size: contain; position: absolute; right: -1.1rem; top: -0.45rem; cursor: pointer; }
.video-shadow video { width: 100%; height: 100%; }
.video-shadow .paused { width: 1.62rem; height: 1.62rem; background: url(../../imgs/pc/video_stop_btn.png) no-repeat 0 0; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; }

@keyframes btns { 0% { transform: scale(0.8, 0.8);
    /*缩放*/ }
  100% { transform: scale(1.2, 1.2);
    /*放大*/ } }
@keyframes codeLine { 0% { top: 0; opacity: 0.8; }
  100% { top: 1.13rem; opacity: 0.5; } }
@keyframes roles { 0% { transform: translateY(0rem); }
  30% { transform: translateY(-0.1rem); }
  60% { transform: translate(-0.05rem, 0.05rem); }
  80% { transform: translate(0.05rem, -0.1rem); }
  100% { transform: translate(0.1rem, 0.1rem); } }