* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;}
html, body {width: 100%;height: 100vh;overflow: hidden;font-family: "Microsoft Yahei", sans-serif;}
.page-wrap {width: 100%;height: 100vh;display: flex;transition: transform 0.5s cubic-bezier(0.2,0,0.2,1);position: relative;}
.page-item {flex-shrink: 0;width: 100%;height: 100vh;position: relative;padding-top: 90px;}
.page-1 {background: url("../img/banner-bg.jpg") center / cover no-repeat;}
.page-2 {background: url("../img/banner-bg1.jpg") center / cover no-repeat;}
.page-3 {background: url("../img/banner-bg2.jpg") center / cover no-repeat;overflow: hidden;}
.video-preview {position: relative;overflow: hidden;}
.preview-control-btn {appearance: none;-webkit-appearance: none;border: none;outline: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 70px;height: 70px;border-radius: 50%;background: rgba(255,255,255,0.3);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);border: 1px solid rgba(255,255,255,0.5);color: #ffffff;font-size: 30px;cursor: pointer;z-index: 10;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;}
.preview-control-btn:hover {background: rgba(255,255,255,0.45);transform: translate(-50%, -50%) scale(1.06);}
.preview-control-btn:active {background: rgba(255,255,255,0.55);}
.preview-control-btn .icon-pause {display: none;}
.preview-control-btn .icon-play {display: inline;}
.preview-control-btn.playing {opacity: 0;pointer-events: none;}
.video-preview:hover .preview-control-btn.playing {opacity: 1;pointer-events: auto;}
.preview-control-btn.playing .icon-play {display: none;}
.preview-control-btn.playing .icon-pause {display: inline;}
.page1-bg-video-box {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;overflow: hidden;}
.page1-bg-video-box video {width: 100%;height: 100%;object-fit: cover;}
.slide-arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 52px;height: 86px;background: rgba(0,0,0,0.35);color: #fff;font-size: 34px;border: none;cursor: pointer;z-index: 9999;transition: all 0.3s ease;border-radius: 4px;}
.slide-arrow:hover {background: rgba(0,0,0,0.7);scale: 1.05;}
.arrow-left {left: 24px;display: none;}
.arrow-right {right: 24px;}
.page-indicator {position: absolute;bottom: 32px;left: 50%;transform: translateX(-50%);display: flex;gap: 14px;z-index: 9999;}
.indicator-bar {width: 38px;height: 6px;background: rgba(255,255,255,0.25);border-radius: 99px;transition: all 0.3s;}
.indicator-bar.active {background: #ffdd44;width: 54px;}
header {width: 100%;padding: 18px 36px;display: flex;align-items: center;justify-content: space-between;background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);z-index: 9999;position: fixed;top: 0;left: 0;}
.logo-area {display: flex;align-items: center;color: #fff;gap: 12px;}
.logo-area img {height: 48px;}
.logo-area h1 {font-size: 26px;letter-spacing: 2px;}
.nav-wrap {display: flex;align-items: center;}
.nav-list {display: flex;}
.nav-list li a {color: #fff;padding: 0 16px;font-size: 16px;transition: 0.25s;}
.nav-list li a:hover, .nav-list li a.active {color: #ffdd44;}
.login-text {color: #fff;font-size: 16px;margin-left: 24px;}
.login-text span {color:#ffdd44;cursor: pointer;margin:0 6px;}
.main-title {position: absolute;top: 14%;left: 50%;transform: translate(-50%, 0);text-align: center;color: #ffffff;z-index: 99;}
.main-title .sub-title {font-size: 28px;letter-spacing: 8px;opacity: 0.8;margin-bottom: 8px;}
.main-title h2 {font-size: 64px;font-weight: normal;line-height: 1.1;color: #ffdd44;}
.left-top-qrcode {position: absolute;left: 36px;top: 62%;width: 160px;z-index: 99;background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(20,20,45,0.2));padding: 14px;border-radius: 10px;box-shadow: 0 8px 32px rgba(0,0,0,0.2);text-align: center;color: #fff;}
.left-top-qrcode .qr-box {width: 100%;height: 130px;background: #fff;border-radius: 6px;overflow: hidden;margin-bottom: 10px;}
.left-top-qrcode .qr-box img {width: 100%;height: 100%;object-fit: cover;}
.left-top-qrcode p {font-size: 14px;opacity: 0.9;}
.notice-box {position: absolute;left: 36px;bottom: 46px;color:#fff;width: 520px;padding:24px;background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(20,20,45,0.2));border-radius: 10px;display: grid;grid-template-rows: auto 1fr;gap:16px;z-index:99;box-shadow: 0 3px 32px rgba(0,0,0,0.3);}
.notice-head {display: flex;justify-content: space-between;font-size:20px;font-weight:bold;}
.notice-head span:last-child a{ color:#ffdd44; }
.notice-list li a {font-size:18px;line-height:2.2;opacity:0.95;color:#ffffff;transition: color 0.25s;}
.notice-list li a:hover {color:#ffdd44;}
.download-area {position: absolute;right:36px;bottom:36px;color:#fff;text-align:center;width: 360px;z-index:99;}
.video-preview {width:360px;height:190px;border-radius:8px;overflow:hidden;margin-bottom:18px;box-shadow: 0 6px 24px rgba(0,0,0,0.4);}
.video-preview video{ width:100%; height:100%; object-fit:cover; }
.qrcode-row {display:flex;gap:16px;justify-content: center;margin-bottom:22px;}
.qrcode-item { flex:1; }
.qrcode-item .qr-box {width:100%;height:118px;background: rgba(255, 255, 255, 0.2);padding:8px;border-radius:8px;}
.qrcode-item p { font-size:14px; margin-top:8px; }
.btn-group{ display:flex; gap:14px; }
.game-btn {flex:1;padding:15px 0;font-size:18px;font-weight:bold;border:none;cursor:pointer;border-radius:8px;background-color: rgb(232, 160, 78);color:#fff;transition: all 0.3s ease;box-shadow: 0 4px 12px rgba(180,112,20,0.35);}
.game-btn:hover {background-color: #ffb82e;transform: scale(1.04);}
.download-fixed-wrap {position: absolute;right: 425px;bottom: 32px;display: flex;flex-direction: column;gap: 10px;z-index: 99;}
.download-fixed-btn {width: 160px;height: 48px;border: none;cursor: pointer;background-size: cover;background-position: center;background-repeat: no-repeat;line-height: 48px;text-align: center;font-size: unset;font-weight: unset;color: unset;border-radius: unset;transition: none;box-shadow: none;background-color: transparent;}
.download-btn1 { background-image: url("../img/download-btn1.png"); }
.download-btn2 { background-image: url("../img/download-btn2.png"); }
.download-btn3 { background-image: url("../img/download-btn3.png"); }
.download-btn4 { background-image: url("../img/download-btn4.png"); }
.download-btn1:hover { background-image: url("../img/download-btn-hover1.png"); }
.download-btn2:hover { background-image: url("../img/download-btn-hover2.png"); }
.download-btn3:hover { background-image: url("../img/download-btn-hover3.png"); }
.download-btn4:hover { background-image: url("../img/download-btn-hover4.png"); }
.feature-wrap {position: absolute;top: 38%;left: 50%;transform: translateX(-50%);width: 88%;max-width: 1240px;display: grid;grid-template-columns: repeat(4, 1fr);gap: 24px;z-index:99;}
.feature-card {background: linear-gradient(145deg, rgba(0,0,0,0.65), rgba(32,22,12,0.4));padding: 28px 20px;border-radius: 12px;text-align: center;color: #fff;border: 1px solid rgba(255,221,68,0.22);transition: 0.35s ease;box-shadow: 0 6px 26px rgba(0,0,0,0.25);}
.feature-card:hover {transform: translateY(-8px);border-color: rgba(255,221,68,0.75);background: linear-gradient(145deg, rgba(0,0,0,0.75), rgba(45,28,15,0.5));}
.feature-card h3 {font-size: 22px;margin-bottom: 12px;color: #ffdd44;}
.feature-card p {font-size: 16px;line-height: 1.75;opacity: 0.92;}
.role-container {width: 100%;height: calc(100vh - 90px);position: relative;margin-top: 90px;padding: 0 60px;display: flex;align-items: center;justify-content: center;gap: 36px;}
.role-main {width: 860px;height: 490px;border-radius: 18px;position: relative;box-shadow: 0 0 55px rgba(0, 0, 0, 0.4);margin-left: 320px;overflow: visible !important;}
.video-block {width: 100%;height: 100%;display: none;position: absolute;left: 0;top: 0;z-index: 1;border-radius: 18px;overflow: hidden;}
.video-block.active {display: block;}
.video-block video {width: 100%;height: 100%;object-fit: cover;}
.video-desc {position: absolute;left: 30px;top: 30px;color: #fff;z-index: 2;}
.video-desc h3 {font-size: 36px;color: #ffdd44;margin-bottom: 12px;}
.video-desc p {font-size: 17px;line-height: 1.8;max-width: 400px;opacity: 0.9;}
.role-left {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 99;pointer-events: none;}
.role-block {position: absolute;display: none;}
.role-block.active {display: block;}
.role1 {width: 960px;height: 860px;left: -500px;bottom: -120px;}
.role2 {width: 1150px;height: 860px;left: -500px;bottom: -100px;}
.role3 {width: 930px;height: 860px;left: -500px;bottom: -130px;}
.role4 {width: 1100px;height: 860px;left: -500px;bottom: -150px;}
.role5 {width: 1100px;height: 860px;left: -500px;bottom: -110px;}
.role-block img {width: 100%;height: 100%;object-fit: contain;}
.role-tab-group {display: flex;flex-direction: column;gap: 20px;z-index: 999;}
.role-tab {width: 110px;height: 110px;position: relative;cursor: pointer;transition: all 0.25s ease;}
.tab-normal, .tab-on {position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-size: contain;background-repeat: no-repeat;background-position: center;}
.tab-on {display: none;}
.role-tab.active .tab-normal {display: none;}
.role-tab.active .tab-on {display: block;}
.tab1 .tab-normal { background-image: url("../img/tab_off1.png"); }
.tab1 .tab-on { background-image: url("../img/tab_on1.png"); }
.tab2 .tab-normal { background-image: url("../img/tab_off2.png"); }
.tab2 .tab-on { background-image: url("../img/tab_on2.png"); }
.tab3 .tab-normal { background-image: url("../img/tab_off3.png"); }
.tab3 .tab-on { background-image: url("../img/tab_on3.png"); }
.tab4 .tab-normal { background-image: url("../img/tab_off4.png"); }
.tab4 .tab-on { background-image: url("../img/tab_on4.png"); }
.tab5 .tab-normal { background-image: url("../img/tab_off5.png"); }
.tab5 .tab-on { background-image: url("../img/tab_on5.png"); }
@media screen and (max-width: 1100px){.role-container {flex-direction: column;height: auto;padding-top: 40px;gap: 24px;}.role-main {width: 92%;height: 400px;margin-left: 0;}.role1,.role2,.role3,.role4,.role5 {width: 600px;height: 520px;left: -40px;bottom: -60px;}.role-tab-group {flex-direction: row;}.role-tab {width: 60px;height: 60px;}.download-fixed-wrap {right: 20px;bottom: 80px;}.download-fixed-btn {width: 140px;height: 42px;font-size: 13px;line-height: 42px;}.left-top-qrcode {width: 120px;top: 22%;}.left-top-qrcode .qr-box {height: 95px;}}
@media screen and (max-width:768px){.role-main {width: 100%;height: 320px;}.role1,.role2,.role3,.role4,.role5 {width: 420px;height: 380px;left: -20px;bottom: -40px;}.role-tab {width: 48px;height: 48px;}.video-desc h3 { font-size:26px; }.video-desc p { font-size:14px; }.download-fixed-wrap {bottom: 60px;}.download-fixed-btn {width: 120px;height: 38px;font-size: 12px;line-height: 38px;}.left-top-qrcode {width: 100px;top: 18%;left: 20px;}.left-top-qrcode .qr-box {height: 80px;}.notice-box {width: calc(100% - 40px);left: 20px;}}
.role-container, .role-tab, .role-block, .video-block {user-select: none;pointer-events: auto !important;}

/* 底部备案版权 固定底部不被遮挡 */
.copyright-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    z-index: 99999; /* 最高层级，不会被任何内容盖住 */

}
.copyright-text {
    color: #ffffff;
    font-size: 13px; 
    text-shadow: 0 1px 3px #000;
    line-height: 1.6;
}
.copyright-text a {
    color: #fff;
    text-decoration: none;
    margin: 0 8px;
}