*{margin: 0;padding: 0;border: 0;list-style: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
img{display: block;width: 100%;}
a{text-decoration: none;}
.clear{clear: both;}
a,input, button,select{
    text-decoration: none;
    /*a标签点击图片有阴影处理*/
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

body{width: 100%;font-family: "Arial";font-size: 1rem;-webkit-text-size-adjust: 100% !important; background: #000000;}
body:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/bg.webp) center 0 no-repeat; background-size: cover;}
.wrap{position: relative;width: 100%;background: #040000; -webkit-text-size-adjust: 100% !important;-webkit-overflow-scrolling:touch;}
.bg{ width: 100%; position: relative;}
.icon{position: absolute;top: 9%;left: 2%;width: 57%;z-index: 2;}
.home{position: absolute;top: 0;right: 0;width: 8%;z-index: 2; padding: 6% 4%;}

.nav_bg{ position: absolute;width: 100%; top: 5.55%; z-index: 1; left: 0;}
.nav{position: -webkit-sticky; position: sticky; top: 0; left: 0; width: 100%; z-index: 10;}
.google{ display: block; position: absolute; width: 70%; top: 11%; z-index: 10; left: 15%;}

.swiper-container{width: 100%;height: 100%;}
.logo{ width: 60%; position: absolute; top: 48%; left: 20%; z-index: 3;}
.intro{position: absolute;top: 75%;left:8%;width: 84%;z-index: 2;}
.part1_light{ width: 100%; position: absolute; top: -11.65%; left: 0; z-index: 2; pointer-events: none;}
.about{ position: absolute; right: 9%; bottom: 3%; font-size: 1rem; color: #ffe8be; cursor: pointer;}

.video_box{ width: 90%; height: 80%; position: absolute; left: 5%; top: 10%; overflow: hidden; z-index: 3;}
.video-wrap{ width: 100%; height: 100%; display: none;}
.msg-wrap{ position: fixed; top: 0; left: 0; background: #fff; border: 1px solid #000; z-index: -1; opacity: 0;}

#slideStore{position: absolute;top: 0;left: 0; width: 100%;}
#slideStore .swiper-slide{ width: 100%;}
#slideStore .swiper-slide-prev,#slideStore .swiper-slide-next{opacity: 0.6 !important; border: 0;}

/* 图片放大查看模态框样式 */
.image-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: hidden;
    /* 为整个模态框添加关闭事件的监听 */
    cursor: pointer;
}

.modal-content {
    position: relative;
    margin: auto;
    display: block;
    width: auto;
    height: auto; /* 改为自适应 */
    max-width: 90%;
    max-height: 90%; /* 增加最大高度，为计数器留出空间 */
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    object-fit: contain;
}

/* 防止图片本身和导航按钮触发关闭事件 */
.modal-content,
.modal-nav,
.modal-close {
    cursor: auto; /* 重置为默认指针 */
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

.modal-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 1001;
    pointer-events: none; /* 让按钮本身不阻挡事件，但内部的箭头可以点击 */
}

.modal-prev, .modal-next {
    color: #fff;
    font-size: 40px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
    user-select: none;
    pointer-events: auto; /* 允许点击导航箭头 */
}

.modal-prev {
    border-radius: 0 5px 5px 0;
}

.modal-next {
    border-radius: 5px 0 0 5px;
}

/* 增强响应式设计：针对竖屏特别优化 */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .modal-content {
        max-width: 95%;
        max-height: 75%; /* 在竖屏下适当减少图片高度占比 */
    }

    .modal-close {
        top: 15px;
        right: 15px;
        font-size: 35px;
    }

    .modal-prev,
    .modal-next {
        font-size: 30px;
        padding: 5px 15px;
        background-color: rgba(0, 0, 0, 0.5); /* 在移动端增加按钮背景可读性 */
    }
}


/*底部信息*/
footer{position: absolute;top: 0;left: 0;width: 100%; height: 100%;}
.fb,.ytb,.discord{position: absolute; width: 33.33%; height: 100%; top: 0;}
.fb{ left: 0;}
.ytb{left: 33.33%;}
.discord{right: 0;}

.bottom,.bot_website{width: 100%; position: absolute; left: 0; top: 45%; color: #ffffff;font-size: 0.8rem; text-align: center;}
.bot_website{top: 20%;text-decoration: underline;font-size: 1rem;}
.privacyBox{position: absolute;bottom: -3rem;left: 0;width: 100%;}
.privacy,.terms{width: 35%; height: 2.2rem; text-align: center; line-height: 1.5rem; color: #ffffff;}
.privacy{ float: left; margin-left: 15%;}
.terms{ float: right; margin-right: 15%;}


/*弹窗*/
.mask{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000000; opacity: 0.7; z-index: 20; display: none;}
.pop{ width: 90%; height: 70vh; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #11121c; color: #ffffff; z-index: 21; text-align: center;}
.pop_txt{ width: 90%; height: 90%; margin: 9% auto 0 auto; font-size: 1rem; box-sizing: border-box; text-align: left; overflow: auto;}
.pop_close { width: 2rem; height: 2rem; position: absolute; top: 1%; right: 2%;}


@-moz-keyframes rotation { 0% { -moz-transform: rotate(90deg);} 20%,100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes rotation { 0% { -webkit-transform: rotate(90deg); } 20%,100% { -webkit-transform: rotate(0deg); } }
@keyframes rotation { 0% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 20%,100% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } }

@-webkit-keyframes float{0%{-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}100%{-webkit-transform:translate(0,10px);-moz-transform:translate(0,10px);-ms-transform:translate(0,10px);-o-transform:translate(0,10px);transform:translate(0,10px)}}
@-moz-keyframes float{0%{-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}100%{-webkit-transform:translate(0,10px);-moz-transform:translate(0,10px);-ms-transform:translate(0,10px);-o-transform:translate(0,10px);transform:translate(0,10px)}}
@-ms-keyframes float{0%{-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}100%{-webkit-transform:translate(0,10px);-moz-transform:translate(0,10px);-ms-transform:translate(0,10px);-o-transform:translate(0,10px);transform:translate(0,10px)}}
@-o-keyframes float{0%{-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}100%{-webkit-transform:translate(0,10px);-moz-transform:translate(0,10px);-ms-transform:translate(0,10px);-o-transform:translate(0,10px);transform:translate(0,10px)}}
@keyframes float{0%{-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px)}100%{-webkit-transform:translate(0,10px);-moz-transform:translate(0,10px);-ms-transform:translate(0,10px);-o-transform:translate(0,10px);transform:translate(0,10px)}}

@-webkit-keyframes zhuan{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@-moz-keyframes zhuan{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@-o-keyframes zhuan{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@keyframes zhuan{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}

@-webkit-keyframes zhuan2{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}
@-moz-keyframes zhuan2{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}
@-o-keyframes zhuan2{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}
@keyframes zhuan2{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}



/*横屏*/
@media screen and (min-aspect-ratio:13/8){
    .wrap{width: 750px;margin: 0 auto; border-left: 2px solid #cfa972; border-right: 2px solid #cfa972;}
    .pop{ width: 36%;}
    .pop_txt{ margin: 6% auto 0 auto;}
}