/* utility */
* {
    margin: 0;
    padding: 0;
}

.d-none {
    display: none;
}

.w-100 {
    width: 100%;
    max-width: 100%;
}

.container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px;
    margin-right: auto;
    margin-left: auto;
}
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

@media only screen and (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media only screen and (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media only screen and (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media only screen and (min-width: 1400) {
    .container {
        max-width: 1320px;
    }
}

body {
    background-color: #0b0b7a;
    background-attachment: fixed;
    background-position: bottom;
    background-size: 100%;
}

@media only screen and (min-width: 768px) {
    body {
        background-image: url(./2026images/07/bg_under.webp);
        background-size: cover;

    }
}

header {
    /* overflow: hidden; */
    margin-bottom: -5vw;
}

@media only screen and (min-width: 768px) {
    header {
        margin-bottom: -52vw;
    }
}

@keyframes zoom {
    0% {
        transform: scale(1);
        /* 初始大小 */
    }

    50% {
        transform: scale(1.1);
        /* 中间大小，可以根据需要调整 */
    }

    100% {
        transform: scale(1);
        /* 最终大小，与初始大小相同 */
    }
}



#logo-wrapper {
    position: relative;
}

#logo {
    position: absolute;
    top: 20vw;
    z-index: 5;
    right: 12.5vw;
    max-width: 75%;
    animation: zoom 8s infinite;
}

#spokesperson-wrapper {
    position: relative;
}

#spokesperson-wrapper img {
    position: absolute;

}

#fei {
    display: none;
    left: 2vw;
    top: 3VW;
    width: 5%;
}

#notice {
    top: 62.6vw;
    width: 24.4%;
    left: 37.9%;
}

@media only screen and (min-width: 768px) {
    #spokesperson-wrapper img {
        display: block;
    }

    #logo {
        top: 23vw;
        right: 17.5vw;
        max-width: 100%;
        width: 65vw;
    }

    #fei {
        left: 35vw;
        top: 9.75VW;
        width: 6.25%;
        z-index: 2;
        display: block;
    }

    #notice {
        top: 63.05vw;
        width: 16%;
        left: 42%;
        z-index: 2;
    }

}

/* nav buttons */
nav {
    margin-top: -194.4VW;
}

#navbuttonWrapper {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0px 6.3%;
}

@media only screen and (min-width: 768px) {
    nav {
        margin-top: 19.75vw;
    }

    #navbuttonWrapper {
        padding: 0px 15%;
    }


}


.navButton {
    width: 50%;
    margin-top: 1.55rem;
    display: flex;
    justify-content: center;
    position: relative;
    align-content: center;
    z-index: 4;
}


.navButton:not([data-startat]) {
    cursor: pointer;
}

.navButton[data-startat]::after {
    content: "\003F";
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -55.5%);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 5rem;
}

@media only screen and (min-width: 768px) {
    .navButton {
        width: 33%;
        margin: 2rem 0%;
    }

    .special {
        padding: 3% 0 0 0;
    }
}

@media only screen and (min-width: 1200px) {
    .navButton[data-startat]::after {
        font-size: 10rem;
    }
}

.navButtonImg {
    max-width: 90%;
    transition: 0.7s;
    aspect-ratio: 1.4961;
}

.navButton>.navButtonImg:nth-child(2) {
    position: absolute;
    opacity: 0;
}

.navButton:not([data-startat]):hover>.navButtonImg:first-child,
.navButton.active>.navButtonImg:first-child {
    opacity: 0;
}

.navButton:not([data-startat]):hover>.navButtonImg:nth-child(2),
.navButton.active>.navButtonImg:nth-child(2) {
    opacity: 1;
}

.navButton[data-startat]>.navButtonImg {
    filter: brightness(0.0);
}

.comingSoon {
    display: none;
    position: absolute;
    top: 27%;
    width: 100%;
    transform: scale(0.5);
}

.navButton[data-startat]>.comingSoon {
    display: block;
}

#firstContentImg {
    aspect-ratio: 1;
}

.contentWrapper {
    display: none;
    position: relative;
}

.contentWrapper[active] {
    display: block;
}

/* hiddenLink  */
.hiddenLink {
    position: absolute;
    display: block;
    left: 29.7%;
    color: #e0e61d;
    text-decoration: none;
    border-bottom: 1px solid #ff0;
    /* for debug */
    /* background: rgba(182, 135, 75, 0.4); */
}

.hiddenLink[link="1-1"] {
    bottom: 11.15%;
}

.hiddenLink[link="1-2"] {
    bottom: 15.2%;
}

.hiddenLink[link="2-1"] {
    bottom: 14.1%;
}

.hiddenLink[link="2-2"] {
    bottom: 10.35%;
}

.hiddenLink[link="2-3"] {
    bottom: 10.35%;
}

.hiddenLink[link="3-1"] {
    bottom: 10.3%;
}

.hiddenLink[link="3-2"] {
    bottom: 19.25%;
}

.hiddenLink[link="4"] {
    bottom: 23.5%;
}


.hiddenLink[link="5"] {
    bottom: 23.6%;
}

.hiddenLink {
    display: none;
}

.hiddenLink.active {
    display: block;
}


@media only screen and (min-width: 768px) {
    .navButtonImg {
        max-width: 95%;
    }

    .hiddenLink {
        /* border: solid 1px red; */
        left: 23%;
        font-size: 30px;
    }


    .hiddenLink[link="1-1"] {
        bottom: 7.3%;
        left: 24%;
    }

    .hiddenLink[link="1-2"] {
        bottom: 17.5%;
    }

    .hiddenLink[link="2-1"] {
        bottom: 15%;
    }

    .hiddenLink[link="2-2"] {
        bottom: 13.7%;
    }

    .hiddenLink[link="2-3"] {
        bottom: 13.7%;
    }

    .hiddenLink[link="3-1"] {
        bottom: 13.7%;
    }

    .hiddenLink[link="3-2"] {
        bottom: 16%;
    }

    .hiddenLink[link="4"] {
        bottom: 18.8%;
        left: 24%;
    }


    .hiddenLink[link="5"] {
        bottom: 18.8%;
        left: 24%;
    }

}

/* sub page  */
.subPageButtonsWrapper {
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
}

.subPageButton {
    cursor: pointer;
    position: absolute;
    width: 59%;
    left: 20.25%;
    top: 45.5%;
}

.subPageButton.new {
    top: 45%;
}

.subPage {
    display: none;
}

.subPage.active {
    display: block;
}

.subPageButton.defultSecond {
    top: 66.75%;
}

.subPageButton.defultSecond.new {
    top: 64.75%;
}

.subPageButton.thirdBtnSub1 {
    top: 49.9%;
    left: 26%;
    width: 48%;
}

.subPageButton.thirdBtnSub2 {
    top: 70.5%;
    left: 25.3%;
    width: 48%;
}

.subPageButton.thirdBtnSub3 {
    top: 91.8%;
    left: 25.6%;
    width: 48%;
}

[class*="fourBtnSub"].subPageButton {
    width: 50%;
    /* border: 1px solid red; */
    left: 25%;
    top: 42%;
}

.subPageButton.fourBtnSub1 {
    top: 63%;
}

.subPageButton.fourBtnSub2 {
    top: 84%;
}

.subPageButton.fourBtnSub3 {
    top: 105%;
}
.subPageButton.fourBtnSub_sp {
    top: 48%;
}

.subPageButton.fourBtnSub1_sp {
    top: 70%;
}
.subPageButton.fourBtnSub2_sp {
    top: 92%;
}
.subPageButton.fourBtnSub3_sp {
    top: 115%;
}

[class*="fiveBtnSub"].subPageButton {
    width: 55%;
    left: 22.5%;
}

.subPageButton.fiveBtnSub1 {
    top: 50%;
}

.subPageButton.fiveBtnSub2 {
    top: 75%;
}

.subPageButton.fiveBtnSub3 {
    top: 100%;
}

.subPageButton.fiveBtnSub4 {
    top: 125%;
}

.subPageButton.fiveBtnSub5 {
    top: 150%;
}

.subPageButton.fiveBtnSub1_sp {
    top: 51%;
}

.subPageButton.fiveBtnSub2_sp {
    top: 73%;
}

.subPageButton.fiveBtnSub3_sp {
    top: 94.5%;
}

.subPageButton.fiveBtnSub4_sp {
    top: 116.5%;
}

.subPageButton.fiveBtnSub5_sp {
    top: 135%;
}




[class*="sixBtnSub"].subPageButton {
    width: 49%;
    /* border: 1px solid red; */
    left: 25.25%;
}

.subPageButton.sixBtnSub1 {
    top: 53%;
}

.subPageButton.sixBtnSub2 {
    top: 74%;
}

.subPageButton.sixBtnSub3 {
    top: 95%;
}

.subPageButton.sixBtnSub4 {
    top: 116%;
}

.subPageButton.sixBtnSub5 {
    top: 137%;
}

.subPageButton.sixBtnSub6 {
    top: 158%;
}

@media only screen and (min-width: 768px) {
    [data-subpage*="-"].subPageButton {
        width: 33.7%;
        left: 13%;
        top: 27%;
    }

    [data-subpage*="-"].subPageButton.new {
        top: 35%;
    }

    [data-subpage*="-2"].subPageButton {
        left: 53.5%;
    }

    [class*="thirdBtnSub"].subPageButton {
        width: 28%;
        top: 29%;
    }

    .subPageButton.thirdBtnSub1 {
        left: 6.25%;
    }

    .subPageButton.thirdBtnSub2 {
        left: 36.25%;
    }

    .subPageButton.thirdBtnSub3 {
        left: 66.5%;
    }

    [class*="fourBtnSub"].subPageButton {
        width: 33%;
        left: 11%;
        top: 27.5%;
    }

    .fourBtnSub_sp {
        left: 53.5%;
    }

    .subPageButton.fourBtnSub1 {
        left: 53.5%;
    }
    .subPageButton.fourBtnSub1_sp {
        left: 53.5%;
    }

    .subPageButton.fourBtnSub2 {
        top: 40%;
    }
    .subPageButton.fourBtnSub2_sp {
        top: 41%;
    }

    .subPageButton.fourBtnSub3 {
        top: 40%;
        left: 53.5%;
    }

    .subPageButton.fourBtnSub3_sp {
        top: 41%;
        left: 53.5%;
    }

    [class*="fiveBtnSub"].subPageButton {
        width: 29%;
        top: 29%;
    }

    .subPageButton.fiveBtnSub1 {
        left: 4.25%;
    }

    .subPageButton.fiveBtnSub2 {
        left: 36%;
    }

    .subPageButton.fiveBtnSub3 {
        left: 66.5%;
    }

    .subPageButton.fiveBtnSub4 {
        top: 41.75%;
        left: 20%;
    }

    .subPageButton.fiveBtnSub5 {
        top: 41.75%;
        left: 51.5%;
    }

    .subPageButton.fiveBtnSub1_sp {
        left: 4.25%;
    }

    .subPageButton.fiveBtnSub2_sp {
        left: 36%;
    }

    .subPageButton.fiveBtnSub3_sp {
        left: 66.5%;
    }

    .subPageButton.fiveBtnSub4_sp {
        top: 41.75%;
        left: 20%;
    }

    .subPageButton.fiveBtnSub5_sp {
        top: 41.75%;
        left: 51.5%;
    }

    [class*="sixBtnSub"].subPageButton {
        width: 29%;
        top: 28%;
    }

    .subPageButton.sixBtnSub1 {
        left: 4.25%;
    }

    .subPageButton.sixBtnSub2 {
        left: 35.5%;
    }

    .subPageButton.sixBtnSub3 {
        left: 66.5%;
    }

    .subPageButton.sixBtnSub4 {
        top: 40.75%;
        left: 4.25%;
    }

    .subPageButton.sixBtnSub5 {
        top: 40.75%;
        left: 35.5%;
    }

    .subPageButton.sixBtnSub6 {
        top: 40.75%;
        left: 66.5%;
    }
}

/* footer */
footer {
    margin-top: 30px;
    border-top: 1px solid #ffea00;
    background: #212183;;
    color: #fff;
    line-height: 1.5;
    padding: 20px 0px;
    /* reserver space for links float in screen bottom */
    padding-bottom: 3vw;
}

@media only screen and (min-width: 768px) {
    footer {
        padding-bottom: 20px;
    }
}

#footerContentWrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

@media only screen and (min-width: 768px) {
    #footerContentWrapper {
        flex-direction: row;
    }
}

#ageLimitIcon {
    margin-top: 0.5rem;
}

@media only screen and (min-width: 768px) {
    #ageLimitIcon {
        margin-top: 0;
    }
}

/* float contents */
#desktopBackToTop {
    position: fixed;
    cursor: pointer;
    transform: scale(0.8);
    right: 2.8rem;
    bottom: 0px;
    display: none;
    z-index: 100;
}

@media only screen and (min-width: 768px) {
    #desktopBackToTop {
        display: block;
        right: 0.8rem;
    }
}

@media only screen and (min-width: 1200px) {
    #desktopBackToTop {
        right: 1.75vw;
    }
}

.wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.videobox {
    width: 85%;
    position: relative;
    margin: auto;
    top: 30vw;
}

.videobox span {
    width: 30px;
    /* 设定容器宽度 */
    height: 30px;
    /* 设定容器高度 */
    border-radius: 50%;
    /* 设定边框为圆形 */
    overflow: hidden;
    /* 隐藏超出容器部分的图像 */
    border: 5px solid #fff;
    /* 添加一个黑色的边框 */
    display: flex;
    /* 使用flex布局居中图像 */
    justify-content: center;
    align-items: center;
    /* 避免图片底部出现空隙 */
    top: -3%;
    right: -2%;
    position: absolute;
    z-index: 99;
}

.videobox img {
    display: block;
    max-width: 25px;
    height: auto;
    cursor: pointer;
    /* 避免图片底部出现空隙 */
}

.video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 55.25%;
    /* background-color: pink; */
}

.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 768px) {
    .videobox {
        top: 19.5vw;
    }
}

@media only screen and (min-width: 1200px) {
    .videobox {
        width: 50%;
    }
}