/* 普通横屏 */
/* header.description {
    background-position: center 65%;
} */

/* header.description {
    width: 105%;
    height: 70vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10%; */
/* width: calc(110vw);
        max-width: 110vw;
        height: auto; */
/* aspect-ratio: 4; */
/* left: 50%; */
/* left: 0;
        right: 0; */
/* margin: 10px auto; */
/* position: relative */
/* width: 100%;
      height: 70vh;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 10%; */
/* } */



/* header.header>.header-title {
    font-size: 80px;
    font-weight: 900;
} */


/* title */
/* .header-title {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateY(-50%);
    font-family: Titan, sans-serif;
    color: var(--mg);
    font-size: 120px;
    transition: left .5s, font-size .5s;
} */

/* .header-title::after {
    position: absolute;
    display: block;
    content: attr(data-text);
    left: -20px;
    top: -15px;
    color: var(--mg);
    padding: 8px;
    -webkit-text-stroke: 8px transparent;
    -webkit-background-clip: text;
    background-color: var(--bg)
} */


/* @media all and (max-width:920px) {
    header.description {
        width: calc(100vw - 100px);
        margin-left: 50px;
        transition: width .5s
    }

    .bigTitle {
        font-size: min(60px, 10vw);
        left: 50%;
        transform: translate(-50%, -50%)
    }
    #content元素在宽度上至少会占据整个视口宽度减去100像素的空间。
    .main #content {
        min-width: calc(100vw - 100px)
    }
} */
.header {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* color: white; */
    color: var(--mg);
    overflow: hidden;
    z-index: 100;
}

.background-image::before,
.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(40%);
    z-index: -1;
}


.header-title {
    position: relative;
    z-index: 1;
    font-size: 6rem;
    font-weight: bold;
    font-family: sans-serif;
    /* Titan, */
    text-shadow: 0px 0px 50px #fff;
    text-align: center;
}



.header-title::after {
    position: absolute;
    display: block;
    content: attr(data-text);
    left: -20px;
    top: -15px;
    color: var(--mg);
    padding: 8px;
    -webkit-text-stroke: 8px transparent;
    -webkit-background-clip: text;
    background-color: var(--bg)
}

/* .introContainer .heading::after */


@media all and (max-width:920px) {

    .main .menubg {
        width: 0;
        margin: 0
    }

    .main .menubg #menu,
    .main .menubg #menu.fixed {
        width: 0;
        opacity: 0;
        pointer-events: none
    }

    .main #content {
        min-width: calc(100vw - 100px)
    }

    /* header.description {
        width: calc(100vw - 100px);
        margin-left: 50px;
        transition: width .5s
    } */

    header.header>.header-title {
        font-size: min(60px, 10vw);
        /* left: 50%; */
        transform: translate(-50%, -50%)
    }

}

/* 如果需要，您还可以添加一些额外的样式来增强效果，  
   比如改变字体颜色或背景色（尽管背景色可能不是必需的，  
   因为您主要关注的是发光效果） */
/* .introContainer .heading:hover, */

.header-title:hover {
    /* 示例：鼠标悬停时改变字体颜色 */
    text-shadow: 0px 0px 50px rgba(255, 255, 255, 1);
    /* 白色或其他您想要的颜色 */

}


.title-container {
    padding: 50px;
}

@media screen and (max-width: 768px) {
    header.header>.header-title {
        font-size: 40px;
    }
}

@media all and (max-width:920px) {
    /* header.description { */
    /* width: calc(100vw); */
    /* margin-left: 50px; */
    /* transition: width .5s */
    /* } */

    header.header>.header-title {
        font-size: min(60px, 10vw);
        left: 50%;
        transform: translate(-50%, -50%)
    }

    /* #content元素在宽度上至少会占据整个视口宽度减去100像素的空间。 */
    .main #content {
        min-width: calc(100vw - 100px)
    }
}

/* gotop */
/* #gotop {
    position: fixed;
    bottom: 30px;
    right: 10px;
   
    height: 80px;
   
    background: none;
    border: none;
    
    justify-content: center;
    align-items: center;
    padding: 0;
    display: none;
}

#gotop img {
    height: 135%;
    object-fit: cover;

    transition: transform 0.3s ease-in-out;
} */

#gotop {
    z-index: 99;
    position: fixed;
    bottom: min(30px, 5vw);
    right: min(50px, 4vw);
    width: fit-content;
    height: min(140px, 10vw);
    transition: height .5s
}

#gotop img {
    height: 100%;
    object-fit: contain;
    object-position: center
}

#gotop .text-wrap * {
    text-wrap: nowrap
}

#gotop:hover .text-wrap {
    opacity: 1
        /* 完全不透明的 */
}

@media all and (max-width:920px) {
    #gotop {
        height: max(30px, 15vw)
    }
}

@media all and (max-width:700px),
all and (max-aspect-ratio:2/3) {
    #gotop {
        height: 25vw;
        display: none
    }
}