body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #040A18;
}

a:focus,
input:focus,
p:focus,
li:focus,
div:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* -webkit-user-modify: read-write-plaintext-only; */
}

.page {
    width: 100%;
    height: 100vh;
    /* max-height: 10.80rem; */
    position: relative;
    box-sizing: border-box;
    /* max-height: 10.8rem; */
    background: #051434;
}

.page1 {
    background: url(../img/pc/page1/bg.jpg) no-repeat center top;
    background-size: 100%;
    position: relative;
}

.page2 {
    background: url(../img/pc/page2/bg.jpg) no-repeat center top;
    background-size: 100%;
    overflow: hidden;
}

.page3 {
    /* height: 9.2rem; */
    background: url(../img/pc/page3/bg.jpg) no-repeat center top;
    background-size: 100%;
    overflow: hidden;
}


.page4 {
    /* height: 9.2rem; */
    background: url(../img/pc/page4/bg.jpg) no-repeat center top;
    background-size: 100%;
    overflow: hidden;
    max-height: 10.80rem;
}

.nav {
    height: 0.82rem;
    /* overflow: hidden; */
}



.nav .topBtns {
    margin-right: 0.32rem;
    display: flex;
    gap: 0.38rem;
}


.nav>ul>li {
    line-height: 0.82rem;
    display: inline-block;
    font-size: 0.24rem;
    color: #ffffff;
    opacity: 0.5;
    user-select: none;
    position: relative;
    padding: 0 0.47rem;
}

.nav>ul>li:after {
    position: absolute;
    content: ' ';
    width: 0.02rem;
    height: 0.14rem;
    background-color: #ffffff;
    opacity: 0.48;
    top: 50%;
    margin-top: -0.06rem;
    right: 0;
}

.nav>ul>li:last-child::after {
    display: none;
}

.nav>ul>li:hover,
.nav>ul>li.active {
    color: #ffffff;
    /* font-weight: bold; */
    opacity: 1;
}

.topBtns .medias {
    width: .29rem;
    height: .23rem;
    background: url(../img/pc/top_audio_icon.png) no-repeat center center;
    background-size: 100%;
    cursor: pointer;
}

.topBtns .medias:hover {
    background: url(../img/pc/top_audio_icon_a.png) no-repeat center center;
    background-size: 100%;
}

.topBtns .playing {
    background: url(../img/pc/top_audio_icon_a.png) no-repeat center center;
    background-size: 100%;
}

.nav>ul {
    float: right;
}

.about {
    width: 0.2rem;
    height: 0.3rem;
    background: url(../img/pc/top_share_icon.png) no-repeat center center;
    background-size: 100%;
    cursor: pointer;
    position: relative; /* 作为下拉列表定位参考 */
}

/* about 下拉社媒列表 */
.about .mediaLists {
    position: absolute;
    top: 110%;
    right: -0.5rem;
    min-width: 2.7rem;
    height: 0.4rem;
    padding: 0.12rem 0.16rem;
    background: rgba(24, 28, 38, 0.95);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border-radius: 0.06rem;
    display: none; /* 默认隐藏，移入用JS fadeIn 显示 */
    z-index: 1001;
}

.mediaLists {
    min-width: 2.7rem;
    height: 0.4rem;
    padding: 0.12rem 0.16rem;
    z-index: 1001;
}

.share-item {
    width: 0.36rem;
    height: 0.36rem;
    cursor: pointer;
    display: inline-block;
}

.about .mediaLists li {
    
}


.about:hover {
    background: url(../img/pc/top_share_icon_a.png) no-repeat center center;
    background-size: 100%;
}

.max-height-1080 {
    height: 100%;
    width: 100%;
    max-height: 10.8rem;
    position: relative;
}

.page1_logo {
    width: 2.5rem;
    height: 1.97rem;
    position: absolute;
    top: 0rem;
    left: 0rem;
    z-index: 2;
}


.page1_main {
    width: 10.76rem;
    position: absolute;
    bottom: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
}

.page1_slog {
    width: 7.87rem;
    height: 2.11rem;
}

.page1_line {
    width: 10.76rem;
    height: 0.06rem;
}

.page1_slog img,
.page1_logo img,
.page1_line img {
    display: block;
    width: 100%;
}

.page1_main_video_btn {
    width: 1.26rem;
    height: 1.26rem;
    background: url(../img/pc/page1/play.png) no-repeat center center;
    background-size: 100%;
    position: absolute;
    right: 1.31rem;
    top: 0;
}

.page1_main_video_btn:hover {
    background: url(../img/pc/page1/play1.png) no-repeat center center;
    background-size: 100%;
    cursor: pointer;
}

.page1_main_btns {
    display: flex;
    justify-content: center;
    margin-top: 0.24rem;
}

.page1_main_btns_gp {
    width: 2rem;
    height: 0.59rem;
    background: url(../img/pc/page1/gp.png) no-repeat center center;
    background-size: 100%;
    margin-left: 1.26rem;
    cursor: pointer;
}

.page1_main_btns_ios {
    width: 2rem;
    height: 0.59rem;
    background: url(../img/pc/page1/ios.png) no-repeat center center;
    background-size: 100%;
    margin-left: 0.74rem;
    cursor: pointer;
}

.page1_main_btns_login {
    width: 3.02rem;
    height: 0.61rem;
    background: url(../img/pc/page1/btn.png) no-repeat center center;
    background-size: 100%;
    /* margin-left: 0.73rem; */
    transform: translateY(-0.01rem);
}

.page1_main_btns_login:hover {
    cursor: pointer;
    background: url(../img/pc/page1/btn1.png) no-repeat center center;
    background-size: 100%;
}


.page2_line {
    width: 11.61rem;
    /* height: 0.62rem; */
    position: absolute;
    top: 3.12rem;
    left: 1.53rem;
}

.page2_line_text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.32rem;
}

.page2_line_text span {
    display: inline-block;
    width: 1.65rem;
    font-size: 0.38rem;
    font-family: Impact;
    color: #ffffff;
    text-align: center;
}
.page2_line_text_active {
    color: #3574D9 !important;
}

.page2_line>img {
    display: block;
    width: 100%;
}

.page2_content {
    display: flex;
    position: absolute;
    top: 4.34rem;
    left: 1.53rem;
    margin-left: -0.31rem;
}

.page2_content_item1 {
    width: 1.66rem;
    height: 3.44rem;
    margin-left: 0.31rem;
    position: relative;
    background: url(../img/pc/page2/box1.png) no-repeat center center;
    background-size: 100% 100%;
}
.page2_content_item_active {
    display: none;
}

.page2_content_item2 {
    width: 1.66rem;
    height: 2.9rem;
    margin-left: 0.31rem;
    position: relative;
    background: url(../img/pc/page2/box2.png) no-repeat center center;
    background-size: 100% 100%;
}

.page2_content_item1>img,
.page2_content_item2>img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.page2_content_item_text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.42rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 第三屏 */

.page3 .inner {
    padding: 0 1.65rem;
    box-sizing: border-box;
    margin-top: 2.72rem;
    display: flex;
    justify-content: space-between;
}

.page3_left {
    width: 8.32rem;
    height: 4.8rem;
    position: relative;
}

.page3 .swiper {
    width: 8.32rem;
    height: 5.2rem;
    position: relative;
    overflow: hidden;
    /* background: url(../img/pc/page3/banner_bg.png) no-repeat center center;
    background-size: 100%; */
}

.page3 .swiper-pagination {
    bottom: 0;
    height: 0.21rem;
    opacity: 1;
    text-align: center;
    width: 98%;
}

.page3 .swiper-slide>a,
.page3 .swiper-slide>span,
.page3 .swiper-slide>div {
    display: block;
    width: 100%;
    height: 4.8rem;
}

.page3 .swiper-pagination-bullet {
    opacity: 1;
    width: 0.21rem;
    height: 0.2rem;
    background: url(../img/pc/page3/broadcast.png) no-repeat center center;
    background-size: 100% 100%;
    box-sizing: border-box;
    border-radius: 0;
}

.page3 .swiper-pagination-bullet-active {
    background: url(../img/pc/page3/broadcast1.png) no-repeat center center;
    background-size: 100% 100%;
}

.page3_right_top {
    display: flex;
    padding-bottom: 0.1rem;
    border-bottom: 1px solid #CCCCCC;
    margin-top: 0.08rem;
}

.page3_right_top .newsTitle {
    width: 2.91rem;
    height: 0.91rem;
    background: url(../img/pc/page3/title.png) no-repeat center center;
    background-size: 100% 100%;
}

/* 第四屏 */



.characterBody {
    width: 13.06rem;
    height: 11.29rem;
    position: absolute;
    left: -0.5rem;
}


.characterInfo {
    position: absolute;
    width: 5.89rem;
    height: 4.89rem;
    right: 2.2rem;
    top: 2.9rem;
}



.characters-item1 .characterBody {
    background: url(../img/pc/page4/role1.png) no-repeat center top;
    background-size: 100%;
}

.characters-item2 .characterBody {
    background: url(../img/pc/page4/role2.png) no-repeat center top;
    background-size: 100%;
}

.characters-item3 .characterBody {
    background: url(../img/pc/page4/role3.png) no-repeat center top;
    background-size: 100%;
}

.characters-item4 .characterBody {
    background: url(../img/pc/page4/role4.png) no-repeat center top;
    background-size: 100%;
}

.characters-item5 .characterBody {
    background: url(../img/pc/page4/role5.png) no-repeat center top;
    background-size: 100%;
}

.characters-item6 .characterBody {
    background: url(../img/pc/page4/role6.png) no-repeat center top;
    background-size: 100%;
}

.characters-item7 .characterBody {
    background: url(../img/pc/page4/role7.png) no-repeat center top;
    background-size: 100%;
}

.characters-item1 .characterInfo {
    background: url(../img/pc/page4/roletitle1.png) no-repeat center top;
    background-size: 100%;
}

.characters-item2 .characterInfo {
    background: url(../img/pc/page4/roletitle2.png) no-repeat center top;
    background-size: 100%;
}

.characters-item3 .characterInfo {
    background: url(../img/pc/page4/roletitle3.png) no-repeat center top;
    background-size: 100%;
}

.characters-item4 .characterInfo {
    background: url(../img/pc/page4/roletitle4.png) no-repeat center top;
    background-size: 100%;
}

.characters-item5 .characterInfo {
    background: url(../img/pc/page4/roletitle5.png) no-repeat center top;
    background-size: 100%;
}

.characters-item6 .characterInfo {
    background: url(../img/pc/page4/roletitle6.png) no-repeat center top;
    background-size: 100%;
}

.characters-item7 .characterInfo {
    background: url(../img/pc/page4/roletitle7.png) no-repeat center top;
    background-size: 100%;
}

.character_voice {
    width: 1.36rem;
    height: 0.78rem;
    position: absolute;
    left: 0.2rem;
    top: 1.82rem;
    cursor: pointer;
}

.careersBox {
    position: absolute;
    width: 1.06rem;
    right: 1.6rem;
    top: 1.4rem;
}

.careers {
    width: 1.06rem;
    height: 5.9rem;
    margin-top: 0.66rem;
}

.careers li {
    width: 1.06rem;
    height: 1.06rem;
    cursor: pointer;
}

.careers-item1 {
    background: url(../img/pc/page4/role1_1.png) no-repeat center top;
    background-size: 100%;
}


.careers-item1.swiper-slide-active {
    background: url(../img/pc/page4/role1_0.png) no-repeat center top;
    background-size: 100%;
}

.careers-item2 {
    background: url(../img/pc/page4/role2_1.png) no-repeat center top;
    background-size: 100%;
}

.careers-item2.swiper-slide-active {
    background: url(../img/pc/page4/role2_0.png) no-repeat center top;
    background-size: 100%;
}

.careers-item3 {
    background: url(../img/pc/page4/role3_1.png) no-repeat center top;
    background-size: 100%;
}

.careers-item3.swiper-slide-active {
    background: url(../img/pc/page4/role3_0.png) no-repeat center top;
    background-size: 100%;
}

.careers-item4 {
    background: url(../img/pc/page4/role4_1.png) no-repeat center top;
    background-size: 100%;
}

.careers-item4.swiper-slide-active {
    background: url(../img/pc/page4/role4_0.png) no-repeat center top;
    background-size: 100%;
}

.careers-item5 {
    background: url(../img/pc/page4/role5_1.png) no-repeat center top;
    background-size: 100%;
}

.careers-item5.swiper-slide-active {
    background: url(../img/pc/page4/role5_0.png) no-repeat center top;
    background-size: 100%;
}

.careers-item6 {
    background: url(../img/pc/page4/role6_1.png) no-repeat center top;
    background-size: 100%;
}

.careers-item6.swiper-slide-active {
    background: url(../img/pc/page4/role6_0.png) no-repeat center top;
    background-size: 100%;
}

.careers-item7 {
    background: url(../img/pc/page4/role7_1.png) no-repeat center top;
    background-size: 100%;
}

.careers-item7.swiper-slide-active {
    background: url(../img/pc/page4/role7_0.png) no-repeat center top;
    background-size: 100%;
}

.nextBtn {
    position: absolute;
    bottom: -0.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 0.34rem;
    height: 0.34rem;
    user-select: none;
    cursor: pointer;
    background: url(../img/pc/page4/arrow2.png) repeat-x center top;
    background-size: 100%;
}

.prevBtn {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 0.34rem;
    height: 0.34rem;
    user-select: none;
    cursor: pointer;
    background: url(../img/pc/page4/arrow1.png) repeat-x center top;
    background-size: 100%;
}


.footer {
    height: 2.47rem;
    background: #0C0D18;
    display: flex;
    padding: 0 3.78rem;
    box-sizing: border-box;
    justify-content: space-between;
}

.footer-left {
    display: flex;
    align-items: center;
}

.footer-company {
    width: 2.21rem;
    height: 0.81rem;
    background: url(../img/pc/footer_logo1.png) repeat-x center top;
    background-size: 100%;
}

.footer-gun {
    width: 1px;
    height: 0.33rem;
    background: #FFFFFF;
    opacity: 0.48;
    margin: 0 0.4rem;
}

.footer-logo {
    width: 2.21rem;
    height: 0.81rem;
    background: url(../img/pc/footer_logo2.png) repeat-x center top;
    background-size: 100%;
}

.footer-right {
    align-items: center;
}

.footer-link {
    display: flex;
    font-size: 0.14rem;
    color: #FFFFFF;
    align-items: center;
    justify-content: center;
    margin-top: 0.38rem;
}

.footer-link-item {
    cursor: pointer;
}

.footer-gun1 {
    width: 1px;
    height: 0.12rem;
    background: #FFFFFF;
    opacity: 0.48;
    margin: 0 0.32rem;
    margin-top: 0.03rem;
}

.footer-info {
    font-size: 0.14rem;
    color: #FEFEFF;
    opacity: 0.4;
    margin: 0 auto;
    text-align: center;
    margin-top: 0.34rem;
}

.footer-share {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.footer-share-item {
    width: 0.36rem;
    height: 0.36rem;
    cursor: pointer;
    margin-top: 0.62rem;
}

.share-fb {
    background: url(../img/pc/footer_fb.png) no-repeat center center;
    background-size: 100%;
}

.share-dc {
    background: url(../img/pc/footer_dc.png) no-repeat center center;
    background-size: 100%;
}

.share-yt {
    background: url(../img/pc/footer_yt.png) no-repeat center center;
    background-size: 100%;
}

.share-tt {
    background: url(../img/pc/footer_tt.png) no-repeat center center;
    background-size: 100%;
}

.share-x {
    background: url(../img/pc/footer_x.png) no-repeat center center;
    background-size: 100%;
}


.share-fb:hover {
    background: url(../img/pc/footer_fb1.jpg) no-repeat center center;
    background-size: 100%;
}

.share-dc:hover {
    background: url(../img/pc/footer_dc1.jpg) no-repeat center center;
    background-size: 100%;
}

.share-yt:hover {
    background: url(../img/pc/footer_yt1.jpg) no-repeat center center;
    background-size: 100%;
}

.share-tt:hover {
    background: url(../img/pc/footer_tt1.jpg) no-repeat center center;
    background-size: 100%;
}

.share-x:hover {
    background: url(../img/pc/footer_x1.jpg) no-repeat center center;
    background-size: 100%;
}