body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

body {
    background: #f5f5f5;
    text-align: center;
    font-family: 'HarmonyOS-Regular';
    overflow-x: hidden;
    /* 防止内容超出有滚动条 */
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    border: none;
}

.middle {
    position: relative;
    width: 100vw;
    top: 3vw;
}


#bottom {
    position: relative;
    top: calc(60 / 1920 * 100vw);
}

.image-overlay {
    position: relative;
    width: 100%;
    /* 根据需要调整高度 */
    overflow: hidden;
}

/* 背景图片 */
.background-img {
    width: 100%;
    object-fit: cover;
    /* 保持比例填充 */
    display: block;
}

/* 半透明遮罩 */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    opacity: 0.6;
}

/* 内容层 */
.top-content {
    position: absolute;
    top: calc(220 / 1920 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    text-align: justify;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-content h2 {
    font-size: calc(26 / 1920 * 100vw);
    margin-bottom: calc(60 / 1920 * 100vw);
    font-family: 'HarmonyOS-Bold';
    font-weight: 700;
}

.top-content p {
    text-indent: 2em;
    font-size: calc(16 / 1920 * 100vw);
    line-height: calc(30 / 1920 * 100vw);
    width: calc(800 / 1920 * 100vw);
    font-family: 'HarmonyOS-Regular';
    font-weight: 400;
}

.content1 {
    width: 100%;
    height: calc(182 / 1920 * 100vw);
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.content1-box {
    width: calc(320 / 1920 * 100vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-top1 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #10069F;
    font-weight: 400;
    margin-bottom: calc(20 / 1920 * 100vw);
}

.text-top1 .big {
    font-size: calc(60 / 1920 * 100vw);
    font-family: 'HarmonyOS-Regular';
    line-height: calc(52 / 1920 * 100vw);
}

.text-top1 .small {
    font-size: calc(30 / 1920 * 100vw);
    line-height: calc(30 / 1920 * 100vw);
}


.text-top2 {
    font-size: calc(18 / 1920 * 100vw);
    font-weight: 400;
}

.line {
    width: 1px;
    height: calc(80 / 1920 * 100vw);
    background-color: #A6A6A6;
    margin-top: calc(62 / 1920 * 100vw);
    transform: scaleX(2);
    /* 放大成 2px */
    transform-origin: center;
}

.content2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content2 .title {
    font-size: calc(32 / 1920 * 100vw);
    line-height: calc(37.5 / 1920 * 100vw);
    font-weight: 500;
    margin-top: calc(100 / 1920 * 100vw);
    margin-bottom: calc(80 / 1920 * 100vw);
    text-align: center;
    font-family: 'HarmonyOS-Medium';
}

.content2 .text {
    font-size: calc(16 / 1920 * 100vw);
    line-height: calc(30 / 1920 * 100vw);
    font-weight: 400;
    width: calc(900 / 1920 * 100vw);
    text-align: justify;
    text-indent: 2em;
    font-family: 'HarmonyOS-Regular';
}

.content2 .letter {
    margin-top: calc(60 / 1920 * 100vw);
    width: calc(860 / 1920 * 100vw);
}

.gallery-title {
    margin-top: calc(120 / 1920 * 100vw);
    font-size: calc(32 / 1920 * 100vw);
    font-weight: 500;
    font-family: 'HarmonyOS-Medium';
}

/* 容器（水平居中并响应式） */
.gallery-marquee {
    width: calc(1920 / 1920 * 100vw);
    /* 可调整总宽度 */
    margin: calc(80 / 1920 * 100vw) auto calc(120 / 1920 * 100vw) auto;
    overflow: hidden;
    position: relative;
}

/* 内层：包含两个相同的 track（JS 会复制） */
.marquee-inner {
    display: flex;
    width: max-content;
}

/* 每组图片行（会被复制一次用于无缝） */
.marquee-track {
    display: flex;
    gap: calc(40 / 1920 * 100vw);
    /* 图片间距 */
    align-items: center;
    margin-right: calc(40 / 1920 * 100vw);
    /* 每组之间的缝隙同图片间缝隙 */
}

/* 单张卡片尺寸：可以调整 item 宽度来控制可见张数 */
.marquee-item {
    flex: 0 0 calc(400 / 1920 * 100vw);
    /* 每张固定宽度（响应式） */
    border-radius: calc(20 / 1920 * 100vw);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    background: #fff;
}

/* 图片样式 */
.marquee-item img {
    display: block;
    width: 100%;
    height: calc(250 / 1920 * 100vw);
    /* 高度可调整，保证等比裁剪 */
    object-fit: cover;
}

/* 动画（从 0 -> -50%，因为内层会有两组相同 track，总宽 = 200% track） */
.marquee-inner.animate {
    animation: marquee-scroll var(--marquee-duration, 20s) linear infinite;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
        /* 移动一整个track的宽度 */
    }
}

/* 鼠标悬停暂停 */
.gallery-marquee:hover .marquee-inner,
.gallery-marquee:focus-within .marquee-inner {
    animation-play-state: paused;
}