:root {
    --screen: min(100vw, 500px);
    font-size: calc((var(--screen) / 460) * 10);
    --app-height: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Arial, "Microsoft YaHei", 微软雅黑, sans-serif;
    height: 100dvh;
    height: var(--app-height);
    width: 100%;
    background:#130744;
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
    overflow-x: hidden;
}

.top_bj{
    background: url(../picture/bj.png) no-repeat top center;
    background-size: contain;
    max-width: 750px;
    width: 100%;
    height: 685px;
}

a {
    text-decoration: none;
    transition: 0.2s;
}

p {
    margin: 0;
}

img {
    line-height: 0;
    font-size: 0;
    margin: 0;
    padding: 0;
}

div {
    /* box-sizing: border-box; */
}

.w750 {
    width: min(100%, 750px);
    display: flex;
    justify-content: center;
    margin: 0 auto;
    height: 100%;
    position: relative;
}
.copy{
    font-size: 14px;
    color: #bb6ed3;
}
.modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* 弹窗背景遮罩 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(10px); /* Safari兼容 */
    background-color: rgba(0, 0, 0, 0.5); /* 可选：添加半透明背景 */
}

/* 弹窗内容 */

/* 弹窗内容 */
.modal-content {
    width: 72%;
    max-width: 540px;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    z-index: 3;
    text-align: center;
    background: #32145a;
    /* 移除透明边框 */
}

.modal-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ff05fc,#9fe3f4,#9fe3f4, #ff05fc);
    z-index: -1;
}

.modal-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px; /* 略小于border-radius以露出边框效果 */
    background: #32145a;
    z-index: -1;
}
.modal-header,
.download-options,
.qr-section {
    position: relative;
    z-index: 4; /* 高于modal-content的z-index(3) */
}
/* 关闭按钮 */
.modal-close-icon {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 5;
    background: url("../picture/close.png") no-repeat center center;
    background-size: contain;
}

.modal-content h2 {
    color: #4e4e4e;
    margin-bottom: 20px;
}

.modal-content p {
    color: #866638;
    margin-bottom: 30px;
    line-height: 1.6;
}

.modal-close {
    background: #f6a73e;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease;
}

.modal-close:hover {
    background: #e3cba8;
}
/* 弹窗内容区域样式 */
.modal-header {
    height: 130px;
}

.modal-header .chinese-title {
    font-size: 24px;
    font-weight: bold;
    color: #4e4e4e;
    margin-bottom: 5px;
}

.modal-header .english-title {
    font-size: 16px;
    color: #866638;
    text-transform: uppercase;
}

.delay-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../picture/ms.png") no-repeat center center;
    background-size: contain;
    color: white;
    height: 48px; /* 恢复原来的高度 */
    width: 114px; /* 设置固定宽度或根据需要调整 */
}
/* 下载选项区域 */
.download-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}
.download-options .text{
    margin: 0 auto;
    width: 80%;
    font-size: 18px;
    color: white;
}

.download-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    background: #070319;
    border-radius: 30px;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5);
    position: relative;
    margin-bottom: 20px;
}

.download-option-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.download-icon {
    font-size: 16.7px;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.download-text {
    font-size: 18px;
    font-weight: revert;
    color: #ffffff;
    flex: 1;
    text-align: center;
}

.download-button {
    color: #ffffff;
    font-size: 16px;
    background: url("../picture/button2.png") no-repeat;
    background-size: 100% 100%;
    width: 124px;
    height: 52px;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease;
    border: none; /* 移除默认边框 */
    outline: none; /* 移除焦点轮廓 */
}



.download-button:hover {
    background: url("../picture/button2-2.png") no-repeat;
    box-shadow: 0 0 0px #b900e1; /* 添加外发光效果 */
    background-size: 100% 100%;
}
.container {
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: min(95vw, 700px);
    width: 100%;
    bottom: 0;
    margin: 0 auto;
    box-sizing: border-box;
    padding: min(3.5vw, 50px);
    z-index: 99;
}

/* 影片 */
.banner {
    width: 100%;
    max-height: 100vh;
    height: 100dvh;
    /* height: var(--app-height); */
    overflow: hidden;
    object-fit: cover;
}

.banner video {
    width: 100%;
    pointer-events: none;
    display: block;
    object-fit: cover;
    object-position: 50% 0%;
    margin: 0 auto;
    height: 100%;
    position: absolute;
    top: 0;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        margin-top: -20px;
    }

    100% {
        opacity: 1;
        margin-top: 0;
    }
}

/* logo */
.logoBox {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.logo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/*.logo img {*/
/*    width: min(48vw, 200px);*/
/*}*/
.image_1 {
    width: 40%;
    max-width: 260px;
    display: block;
}
.image_2 {
    width: 90%;
    max-width: 260px;
    display: block;
}
.long {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: block;
}


.sub01,
.sub02 {
    color: #fff;
    text-transform: uppercase;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .8);
}

.sub01 {
    font-weight: bold;
    font-size: min(4vw, 32px);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.sub02 {
    font-size: min(2.0vw, 15px);
    letter-spacing: -0.2px;
}

/* 選單 */
.menuBox {
    width: min(95vw, 100%);
    width: 80%;
    border-radius: min(2.8vw, 45px);
    padding: min(3vw, 30px) 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.menu {
    width: calc(50% - 10px); /* 确保一行两个，减小间距 */
    height: 101px;
    background: url("../picture/button.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 5px; /* 添加外边距控制间距 */
}

.menu_flex {
    display: grid;
    align-items: center;
    grid-template-columns: 70px auto; /* 调整列宽比例 */
    width: 90%;
    justify-items: flex-start; /* 左对齐 */
    margin-left: 20px; /* 整体右移 */
}


.menuIcon_h {
    display: none;
}
.menuIcon {
    width: 53px; /* 固定图标宽度 */
    margin-left: 15px; /* 图标与文字间距 */
}

.menuText01 {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    text-transform: uppercase;
    text-shadow:
            0 0 10px rgba(64, 215, 246, 1.0),
            0 0 20px rgba(64, 215, 246, 1.8),
            0 0 30px rgba(64, 215, 246, 1.6),
            -1px -1px 0 #510eb8,
            1px -1px 0 #510eb8,
            -1px 1px 0 #510eb8,
            1px 1px 0 #510eb8;
}


.service-text {
    background: url("../picture/button4.png") no-repeat center center;
    background-size: contain;
    margin: 0 auto;
    width: 505px;
    height: 74px;
    font-size: 30px;
    font-weight: bold;
    font-weight: revert;

    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;
    position: relative; /* 改为 relative 定位 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.delay-circle{
    width: 10px;
    height: 10px;
}
.service-text {
    background: url("../picture/button4.png") no-repeat center center;
    background-size: contain;
    margin: 0 auto;
    width: 505px;
    height: 74px;
    font-size: 30px;
    font-weight: bold;
    font-weight: revert;
    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.service-text img {
    width: 61px;
    height: 61px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.menu:hover {
    color: #fff;
  background: url("../picture/button-1.png") no-repeat;
    background-size: 100% 100%;
    z-index: 2;
}

.menu:hover .menuText01 {
    color: #fff;
}

.menu:hover .menuIcon {
    filter: initial;
}

.menuPop {
    /* display: none; */
    border: 2px solid #9609f2;
    border-radius: 1.5rem;
    padding: min(1.5rem, 20px);
    background: rgba(0, 0, 0, .9);
    position: absolute;
    bottom: 135%;
    margin-bottom: -15px;
    pointer-events: none;
    opacity: 0;
    width: auto;
    z-index: 5;
}

.menuPop01 {
    /* display: block; */
    width: min(95vw, 500px);
    left: 0;
    box-sizing: border-box;
}

.menuPop:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 24px;
    bottom: -24px;
    background: url(../picture/popArrow.png) 50% 0% no-repeat;
    background-size: 24px auto;
}

/* .menu:hover .menuPop, */
.menuPop.active {
    opacity: 1;
    transition: .2s;
    margin-bottom: 0;
    pointer-events: initial;
}

/* @media screen and (min-width: 750px) {
    .menu:hover .menuPop {
        opacity: 1;
        transition: .2s;
        margin-bottom: 0;
        pointer-events: initial;
    }
} */


.menuPop.active {
    opacity: 1;
    transition: .2s;
    margin-bottom: 0;
    pointer-events: initial;
}


/* menu彈窗01_跳轉彈窗 */

.webTitle {
    font-weight: normal;
    font-size: 1rem;
    text-align: center;
    display: block;
}

.webTitleImg {
    margin: 8px 0;
    width: min(37vw, 509px);
}

.webBox {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: grid;
    grid-template-columns: 15% 65% 20%;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.webBox:nth-last-of-type(1),
.subMenu:nth-last-of-type(1) {
    margin-bottom: 0;
}

.ms {
    border: 1px solid #9609f2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    font-size: min(3.5vw, 1.1rem);
    font-size: 1.4rem;
    font-weight: normal;
}

.sign {
    width: min(1.5vw, 7px);
    height: min(1.5vw, 7px);
    border-radius: 50px;
    background: #6bf63a;
    margin-right: 2px;

}

.webArrow {
    margin-right: 18px;
}

.webArrow img {
    width: min(4vw, 19px);
}

.website {
    background: linear-gradient(#470277, #0a0c26, #470277);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: normal;
    padding: 0 8px;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
}

.webBtn {
    color: #a6a7c5;
    background: linear-gradient(#60039d, #080a23, #60039d);
    box-shadow: inset 1px 1px 5px #7b06c8, inset -1px -5px 8px #7505bf;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    /* font-size: min(3.8vw, 1.1rem); */
    font-size: 1.4rem;
}

.webBtn:hover {
    color: #fff;
    background: linear-gradient(#b13bff, #080a23, #b13bff);
    box-shadow: inset 1px 1px 5px #b13bff, inset -1px -5px 8px #b13bff;
}


/* menu彈窗03_跳轉彈窗 */
.subMenu {
    color: #a6a7c5;
    background: linear-gradient(#470277, #0a0c26, #470277);

    padding: min(.9rem, 9px) min(1.8rem, 18px);
    border-radius: 8px;
    width: 100%;
    text-align: center;
    font-size: min(3.5vw, 1.6rem);
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid #9609f2;
    margin-bottom: 8px;
    display: grid;
    align-items: center;
    grid-template-columns: 40px auto;
    width: 100%;
    justify-items: center;
    box-sizing: border-box;
}

.subMenu:hover {
    color: #fff;
    border: 1px solid #9609f2;
    box-shadow: inset 1px 0px 4px #b13bff, inset -1px 0px 4px #b13bff;
    background: linear-gradient(#b13bff, #080a23, #b13bff);
}

.subMenu:hover img {
    filter: brightness(2) contrast(2);
}

.subMenu img {
    height: 2.3rem;
    margin-right: 5px;
}

.subMenu img.menu04-2 {
    height: 2.3rem;
}

.QR {
    width: min(45vw, 200px);
}

.download {
    display: inline-block;
}

.download img {
    width: min(95vw, 100%);
    margin: 0 auto;
    display: inline-block;
}
.error{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    margin: 0.67em 0;
}

@media screen and (max-width: 460px) {
    .w750 {
        width: 500px;
    }

    .logo img {

    }

    .banner video {
        top: -50px;
    }

    .container {
        padding: 12px;
    }

    .sub01 {
        font-weight: bold;
        font-size: min(2.1vh, 32px);
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .sub02 {
        font-size: min(1.08vh, 15px);
        letter-spacing: -0.2px;
    }

    .menu {
        font-size: 15px;
        height: 10vh;
    }

    .menu_flex {
        grid-template-columns: 50px auto;
    }

.menuIcon{
    width: 2.5rem;
    margin-left: 10px;
}
    .subMenu {
        font-size: 15px;
    }
}

@media screen and (max-width: 750px) {
    .banner video {
        height: 90%;
    }
    .download-option {
        border-radius: 25px;
    }
    .download-button {
        width: 90px;
        height: 38px;
        padding: 5px 15px;
        font-size: 12px;
    }

}

@media screen and (max-width: 460px) {
    .w750 {
        width: min(100%, 750px);
    }


    .banner video {
        top: 0;
    }



    .menuText01 {
        font-size: 1.5rem;
        letter-spacing: -0.7px;
    }

    .menu_flex {
        width: 95%;
        grid-template-columns: 4.5rem auto;
    }

    .menuPop01 {
        width: 90vw;
    }



    #menu02 .menuPop,
    #menu04 .menuPop {
        right: 0;
    }

    /* .menu:hover .menuPop {
      
    } */
}

/* 弹窗中的webBox样式 */
.webBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #4c4c4c;
    border-radius: 30px;
    padding: 0 15px;
    margin-bottom: 10px;
    height: 60px;
    box-sizing: border-box;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5);
}

.webBox .ms {
    display: flex;
    align-items: center;
    gap: 5px;
}

.webBox .sign {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #4CAF50;
}

.webBox .website {
    display: flex;
    align-items: center;
    gap: 10px;
}

.webBox .website span {
    color: #e8c66f;
    font-size: 16px;
}

.webBox .webBtn {
    background: url("../picture/button2.png") no-repeat;
    background-size: 100% 100%;
    width: 124px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #232a35;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s ease;
}

.webBox .webBtn:hover {
    background: url("../picture/button2-2.png") no-repeat;
    background-size: 100% 100%;
}

/* 在小屏幕上的适配 */
@media screen and (max-width: 750px) {
    .service-text {
        width: 80%;
        height: 34px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .service-text:hover {
        background: url("../picture/button4-4.png") no-repeat;
        background-size: contain;
        margin: 0 auto;
        width: 80%;
        height: 34px;
        font-size: 14px;
        font-weight: bold;
        font-weight: revert;

        color: #ffffff;
        text-align: center;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .service-text img {
        width: 31px;
        height: 31px;
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .delay-indicator {

        height: 20px;
        width: 50px;
    }
    .delay-circle{
width: 5px;
        height: 5px;
        margin-left: 5px;
    }
    .delay-text {
        height: 38px; /* 恢复原来的高度 */
        width: 50px; /* 设置固定宽度或根据需要调整 */
    }
    .download-text {
        font-size: 9px;

    }
    .menuBox{
        width: 100%;
    }
    .content-image {
        margin-top: 5px;
        max-height: 40px;
    }
    .content-image2 {
        margin-top: 5px;
        max-height: 80px;
    }
    .modal-content{
        width: 80%;
        padding: 20px;
    }
    .modal-header{
        padding-top: 15px;
        background-size: 100px;
        height: 80px;
    }
    .download-options {
        gap: 5px;
        margin-bottom: 0px;
    }
    .download-options .text{
        margin: 0 auto;
        width: 80%;
        font-size: 12px;
        color: white;
    }
    .download-option {
        padding: 0 0 0 10px;
        height: 42px;
        gap: 8px;
        margin-bottom: 6px;
    }
    .webBox {
        height: 42px;
        padding: 0 10px;
        margin-bottom: 6px;
    }

    .webBox .website span {
        font-size: 12px;
    }

    .webBox .webBtn {
        width: 90px;
        height: 42px;
        font-size: 12px;
    }
}

/* 针对触摸设备禁用hover效果 */
@media (hover: none) {
    .menu:hover {
        background: url("../picture/button.png") no-repeat;
        background-size: 100% 100%;
    }

    .menu:hover .menuText01 {
        color: #fff;
    }

    .download-button:hover {
        background: url("../picture/button2.png") no-repeat;
        background-size: 100% 100%;
        box-shadow: none;
    }

    .service-text:hover {
        background: url("../picture/button4.png") no-repeat center center;
        background-size: contain;
    }

    .webBtn:hover {
        color: #a6a7c5;
        background: linear-gradient(#60039d, #080a23, #60039d);
        box-shadow: inset 1px 1px 5px #7b06c8, inset -1px -5px 8px #7505bf;
    }

    .subMenu:hover {
        color: #a6a7c5;
        border: 1px solid #9609f2;
        box-shadow: none;
        background: linear-gradient(#470277, #0a0c26, #470277);
    }

    .subMenu:hover img {
        filter: none;
    }
}
@media screen and (max-width: 750px) and (min-height: 800px) {
    .container {
        bottom: 100px;
    }
}