@font-face {
    font-family: MiSansVF;
    src: url(../fonts/MiSansVF.ttf);
}

* {
    text-transform: uppercase;
}

html,
body {
    margin: 0;
    padding: 0;
    min-width: 1366px;
    background-color: #FFFFFF;
    font-family: MiSansVF;
}

.logo {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo-image {
    width: 600px;
    height: 100px;
}

.logo-link {
    text-decoration: none;
    width: 176px;
    height: 29px;
    margin-top: 11px;
    padding-top: 2.5px;
    border: 1px solid #040000;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 900;
    color: #231815;
}

.logo-link:hover {
    background-color: #040000;
    color: #FFFFFF;
}

.view-more-link {
    color: #040000;
    text-decoration: none;
}

.navbar {
    position: fixed;
    background-color: white;
    width: 100%;
    height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #040000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
}

.navbar-bottom {
    position: relative;
    height: 50px;
}

.navbar-left {
    width: 40%;
    display: flex;
    align-items: center;
}

/* .navbar-right {
    width: 40%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
} */

.navbar-right {
    width: 40%;
    flex-direction: row-reverse;
    display: flex;
    align-items: flex-end;
    /* 关键修改：设置容器内元素底部对齐 */
    gap: 29px;
    /* 使用gap代替margin-right控制间距 */
}

.navbar-right-shop-image-container {
    width: 24px;
    /* 移除固定高度限制，让容器自适应图片高度 */
    display: flex;
    align-items: flex-end;
    /* 容器内图片底部对齐 */
    padding-right: 60px;
    /* 最右侧与边缘的距离 */
}

.navbar-right-person-image-container {
    width: 24px;
    /* 移除固定高度限制，让容器自适应图片高度 */
    display: flex;
    align-items: flex-end;
    /* 容器内图片底部对齐 */
}

/* 统一图片样式，移除冗余的margin */
.navbar-right-person-image {
    width: 24px;
    height: 25px;
    /* 移除margin-right，由父容器gap控制间距 */
}

.navbar-right-shop-image {
    width: 24px;
    height: 23px;
    /* 移除margin-right，由父容器gap控制间距 */
}

.navbar-item {
    /* height: 20px; */
    width: 115px;
    height: 23px;
    /* padding: 0 30px; */
    margin: 0 15px;
    border: 1px solid #040000;
    border-radius: 5px;
    font-size: 10px;
    /* font-weight: 600; */
    color: #040000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    position: relative;
    z-index: 9999;
    background-color: #FFFFFF;
}

.navbar-item-disabled {
    height: 20px;
    padding: 0 30px;
    margin: 0 15px;
    border: 1px solid #727272;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 500;
    color: #727272;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.navbar-item:hover {
    background-color: #040000;
    color: #FFFFFF;
    cursor: pointer;
}

.navbar-item-dropdown-content {
    display: none;
    position: relative;
    z-index: 9;
}

.navbar-item-dropdown-content-navbar {
    position: absolute;
    left: 15px;
    top: -15px;
    padding-top: 25px;
    padding-bottom: 10px;
    width: calc(100% - 32px);
    border: 1px solid #040000;
    /* border-radius: 5px; */
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* .navbar-item-dropdown-content-navbar::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -5px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #040000;
} */

.navbar-item-dropdown-content-navbar-item {
    height: 20px;
    width: calc(100% - 10px);
    margin: 10px 0;
    border: 1px solid #040000;
    border-radius: 5px;
    font-size: 10px;
    /* font-weight: 600; */
    color: #040000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.navbar-item-dropdown-content-navbar-item:hover {
    background-color: #070002;
    color: #FFFFFF;
}

.navbar-item-dropdown:hover .navbar-item-dropdown-content {
    display: block;
}

.navbar-center-logo-image {
    /* width: 200px; */
    height: 20px;
}

.fallback {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    gap: 20px;
    /* 图片与文字之间的间距（可选） */
    text-decoration: none;
    /* 去掉链接下划线（可选） */
    color: inherit;
    /* 避免链接颜色覆盖文字颜色 */
}

.fallback-img {
    height: 25px;
    width: 13px;
}

.fallback-text {
    /* width: 38px;
    height: 13px; */
    /* 移除 width 和 height，避免文字截断 */
    font-family: MiSansVF, MiSansVF;
    font-weight: 400;
    font-size: 15px;
    color: #040000;
    /* letter-spacing: 14px; */
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.subtitle {
    height: 40px;
    border-bottom: 1px solid #040000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #040000;
}

.subtitle-new {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #040000;
    height: 90px;
}

.subtitle-new-inside {
    /* width: 181px; */
    /* height: 31px; */
    font-family: MiSansVF, MiSansVF;
    font-weight: 600;
    font-size: 38px;
    color: #040000;
    /* letter-spacing: 38px; */
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.dock-title-new {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
}

.dock-title-new-inside {
    font-family: MiSansVF, MiSansVF;
    font-weight: 600;
    font-size: 18px;
    color: #040000;
    text-align: left;
    font-style: normal;
    text-transform: none;
    border-bottom: 1px solid #040000;
}

.home-image {
    width: 100%;
    height: calc(100vh - 90px);
    object-fit: cover;
    display: block;
}

/* .main {
    height: max(492px, calc(100vh - 276px));
    overflow: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.main::-webkit-scrollbar {
    display: none;
} */

.main-video {
    width: 100%;
    height: max(630px, calc(100vh - 90px));
    /* scroll-snap-align: start; */
    object-fit: cover;
    display: block;
}

.main-list-row {
    height: max(630px, calc(100vh - 90px));
    /* scroll-snap-align: start; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.main-list-row-item {
    border-bottom: 1px solid #040000;
    border-right: 1px solid #040000;
    height: 100%;
    width: calc(100vw / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* .main-list-row-item:hover {
    width: calc(100vw / 4 - 2px);
    height: max(490px, calc(100vh - 278px));
    border: 1px solid #040000;
} */

.home-big-title-container {
    display: flex;
    flex-direction: column;
    /* 每个子元素独占一行 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    height: 300px;
    text-align: center;
    /* 防止某些字体渲染偏移 */
    gap: 10px;
    /* 两行之间的间距（现代浏览器支持） */
}

.home-big-title {
    font-family: MiSans, MiSans;
    font-weight: 800;
    font-size: 49px;
    color: #060001;
    font-style: normal;
    text-transform: none;
    text-align: center;
}

.home-big-title-down-content {
    font-family: MiSans, MiSans;
    font-weight: 600;
    font-size: 31px;
    color: #060001;
    font-style: normal;
    text-transform: none;
    text-align: center;
}

.anniversary-big-title-container {
    height: 200px;
}

.anniversary-big-title {
    font-family: MiSans, MiSans;
    font-weight: 800;
    font-size: 33px;
    color: #060001;
    font-style: normal;
    text-transform: none;
    text-align: center;
    margin-top: 140px;
}

.anniversary-big-title-down-content {
    font-family: MiSans, MiSans;
    font-weight: 600;
    font-size: 18px;
    color: #060001;
    font-style: normal;
    text-transform: none;
    text-align: center;
    margin-top: 46px;
}

.anniversary-main-content {
    margin: 0 75px;
}

.main-big-image-container-anniversary {
    margin: 10px 0;
}

.main-big-image-container-anniversary-bottom-image {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    margin-top: 100px;
    margin-bottom: 50px;
}

.anniversary-main-half-image {
    margin: 0 5px;
}

.anniversary-main-text {
    border-top: 1px solid #040000;
    text-align: center;
    font-family: MiSans, MiSans;
    color: #060001;
    font-style: normal;
    margin-top: 50px;
}

.anniversary-main-text-1 {
    text-transform: none;
    font-weight: 800;
    font-size: 33px;
    margin-top: 40px;
    margin-bottom: 50px;
}

.anniversary-main-text-2 {
    text-transform: none;
    font-size: 23px;
}

.anniversary-main-text-3 {
    text-transform: none;
    font-size: 16px;
    margin-top: 50px;
    margin-bottom: 70px;
}

.anniversary-main-text-4 {
    text-transform: none;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
}

.anniversary-main-text-5 {
    text-transform: none;
    font-weight: 800;
    font-size: 33px;
    margin-top: 50px;
}

.anniversary-main-text-6 {
    text-transform: none;
    font-weight: 800;
    font-size: 23px;
    margin-top: 10px;
}

.anniversary-main-text-3-container {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    margin-bottom: 20px;
}

.anniversary-main-text-3-container-left {
    text-transform: none;
    text-align: right;
    width: 50%;
    margin-right: 50px;
}

.anniversary-main-text-3-container-right {
    text-transform: none;
    text-align: left;
    width: 50%;
    margin-left: 50px;
}

.main-list-row-item-image-container {
    width: 285px;
    height: 285px;
}

.main-big-image-container {
    display: flex;
    justify-content: space-between;
}

.main-big-image-container-height {}

/* 新增a标签样式，确保它不影响居中 */
.image-link {
    justify-content: center;
    /* 链接内部居中 */
    width: 100%;
    /* 占满容器宽度，保证图片能完整显示 */
    line-height: 0;
    /* 去除a标签夹img标签造成的空白 */
    position: relative;
    /* 关键：让子元素 main-big-image-over-text 以它为基准定位 */
}

.main-big-image {
    width: 100%;
    object-fit: scale-down;
    display: block;
}

/* 绝对定位的子元素 */
.main-big-image-over-text {
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0px;
}

.main-big-image-over-text-left {
    text-align: left;
    margin-left: 50px;
}

.main-big-image-over-text-left-up {
    font-family: MiSans, MiSans;
    font-weight: 800;
    font-size: 33px;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 50px;
}

.main-big-image-over-text-left-down {
    font-family: MiSans, MiSans;
    font-weight: 600;
    font-size: 21px;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.main-big-image-over-text-right {
    width: 100%;
    text-align: right;
}

.main-big-image-over-text-right-content {
    font-weight: bold;
    margin-right: 50px;
    font-family: MiSans, MiSans;
    font-weight: 600;
    font-size: 31px;
    color: #FFFFFF;
    font-style: normal;
    text-transform: none;
    box-sizing: border-box;
}

.main-half-image-container {
    width: 50%;
}

.main-half-image {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
    /* 去除a标签夹img标签造成的空白 */
    display: block;
}

.main-list-row-item-image {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
}

.main-list-row-item-details-container {
    margin-top: 45px;
    width: 210px;
}

.main-list-row-item-details-brand {
    color: #231815;
    font-size: 14px;
    font-weight: bold;
}

.main-list-row-item-details-name {
    color: #231815;
    font-size: 14px;
}

.main-list-row-item-details-rmb {
    margin-top: 47px;
    font-family: MiSansVF, MiSansVF;
    font-weight: bold;
    font-size: 24px;
    color: #231815;
    line-height: 33px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.footer {
    height: 138px;
    border-top: 1px solid #040000;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-services {
    /* width: 280px; */
    display: flex;
    align-items: center;
}

.footer-services-item {
    margin: 0 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-services-button {
    width: 70px;
    height: 20px;
    border-radius: 5px;
    background-color: #040000;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.footer-services-image {
    height: 15px;
}

.footer-services-text {
    margin-top: 4px;
    font-size: 8px;
    /* letter-spacing: -2px; */
    color: #231815;
}

.footer-services-button .footer-services-tooltip {
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    width: 180px;
    height: 90px;
    margin-left: -90px;
    visibility: hidden;
    border-radius: 10px;
    background-color: #ffffff;
    border: solid 1px #040000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-services-button .footer-services-tooltip1 {
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    width: 90px;
    height: 95px;
    margin-left: -45px;
    visibility: hidden;
    border-radius: 10px;
    background-color: #ffffff;
    border: solid 1px #040000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-services-tooltip-image {
    width: 80px;
    display: block;
}

.footer-services-button .footer-services-tooltip::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #040000 transparent transparent transparent;
}

.footer-services-button:hover {
    cursor: pointer;
}

.footer-services-button .footer-services-tooltip1::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #040000 transparent transparent transparent;
}

.footer-services-button:hover .footer-services-tooltip {
    visibility: visible;
}

.footer-services-button:hover .footer-services-tooltip1 {
    visibility: visible;
}

.subtitle-classification {
    height: 29px;
    padding: 0 20px;
    background-color: #040000;
    border-radius: 10px;
    font-size: 10px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shoes-list {
    height: max(630px, calc(100vh - 90px));
    overflow: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shoes-list::-webkit-scrollbar {
    display: none;
}

.shoes-list-row {
    height: max(630px, calc(100vh - 90px));
    /* scroll-snap-align: start; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.shoes-list-item {
    width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.shoes-list-item-image-container {
    height: 380px;
    width: 380px;
}

.shoes-list-item-image {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
}

.shoes-list-item-image:hover {
    border: 1px solid #040000;
}

.shoes-list-item-details-container {
    margin-top: 45px;
    width: 220px;
    height: 150px;
}

.shoes-list-item-details-item {
    font-size: 14px;
    font-weight: 900;
    color: #231815;
    line-height: 21px;
}

.shoes-list-item-details-color {
    display: flex;
}

.shoes-list-item-details-color-black {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border: 1px solid #040000;
    border-radius: 2px;
    background-color: #040000;
}

.shoes-list-item-details-color-yellow {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border: 1px solid #040000;
    border-radius: 2px;
    background-color: #F8C800;
}

.shoes-list-item-details-color-sand {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border: 1px solid #040000;
    border-radius: 2px;
    background-color: #B9B09D;
}

.shoes-list-item-details-color-white {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border: 1px solid #040000;
    border-radius: 2px;
    background-color: #F2F1F1;
}

.shoes-details {
    width: 100%;
    height: max(900px, calc(100vh - 90px));
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.shoes-details-left {
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    height: max(900px, calc(100vh - 90px));
    width: 206px;
    margin-left: 10px;
    overflow: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shoes-details-left::-webkit-scrollbar {
    display: none;
}

.shoes-details-left-item {
    width: 200px;
    height: 100px;
    margin: 6px 0;
    opacity: 0.3;
}

.shoes-details-left-item-active {
    width: 200px;
    height: 100px;
    border: 1px solid #040000;
    margin: 6px 0;
}

.shoes-details-left-item-image {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.shoes-details-center {
    width: min(750px, calc(100vw - 976px));
    height: min(750px, calc(100vw - 976px));
    /* border: 1px solid #040000; */
    /* margin-left: 30px; */
    /* margin-right: 30px; */
}

.shoes-details-right {
    display: flex;
    flex-direction: column;
    position: relative;
}

.shoes-details-right-mask {
    position: absolute;
    right: 0;
    top: 0;
    width: 620px;
    height: 100%;
    background-color: #FFFFFF;
    border-left: 1px solid #040000;
}

.shoes-details-right-mask-close {
    cursor: pointer;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.shoes-details-right-mask-close::before,
.shoes-details-right-mask-close::after {
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: (2px / -2);
    content: '';
    background: #000;
}

.shoes-details-right-mask-close::before {
    transform: rotate(-45deg);
}

.shoes-details-right-mask-close::after {
    transform: rotate(45deg);
}

.shoes-details-right-mask-title {
    font-weight: bold;
    font-size: 14px;
    color: #231815;
    padding-left: 30px;
    padding-top: 70px;
    padding-bottom: 10px;
    border-bottom: 1px solid #040000;
}

.shoes-details-right-mask-container {
    height: calc(100% - 100px);
    overflow: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shoes-details-right-mask-container::-webkit-scrollbar {
    display: none;
}


.shoes-details-right-mask-list {
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #040000;
}

.shoes-details-right-mask-list-title {
    font-weight: bold;
    font-size: 10px;
    color: #231815;
}


.shoes-details-right-title {
    font-size: 14px;
    font-family: Ansley Display;
    font-weight: 900;
    color: #231815;
    line-height: 21px;
}

.shoes-details-right-content {
    font-size: 14px;
    font-family: OPPOSans;
    color: #231815;
    line-height: 24px;
}

.shoes-details-right-card {
    margin-top: 30px;
    width: 323px;
    height: 169px;
    border: 1px solid #040000;
    border-radius: 10px;
    position: relative;
}

.shoes-details-right-card-badge {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 14px;
    font-family: Ansley Display;
    font-weight: 900;
    color: #231815;
    display: flex;
    align-items: center;
}

.shoes-details-right-card-image {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.shoes-details-right-size-list {
    margin-top: 30px;
    display: flex;
}

.shoes-details-right-size-box-wider {
    width: 67px;
    height: 42px;
    margin-right: 10px;
    border: 1px solid #040000;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: Ansley Display;
    font-weight: 900;
    color: #040000;
    line-height: 24px;
}

.shoes-details-right-size-box {
    width: 42px;
    height: 42px;
    margin-right: 10px;
    border: 1px solid #040000;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: Ansley Display;
    font-weight: 900;
    color: #040000;
    line-height: 24px;
}

.shoes-details-right-buy {
    margin-top: 30px;
    height: 40px;
    width: calc(100% - 10px);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #040000;
    color: #FFFFFF;
    font-size: 12px;
    font-family: Ansley Display;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 24px;
    cursor: pointer;
}

/* .clothes-list {
    height: max(630px, calc(100vh - 138px));
    overflow: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.clothes-list::-webkit-scrollbar {
    display: none;
} */

.clothes-list-row {
    height: max(630px, calc(100vh - 90px));
    /* scroll-snap-align: start; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.clothes-list-row-item {
    height: 100%;
    width: calc(100vw / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #040000;
    border-right: 1px solid #040000;
}

.clothes-list-row-item-image-container {
    width: 285px;
    height: 285px;
}

.clothes-list-row-item-image {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
}

/* .clothes-list-row-item-image:hover {
    border: 1px solid #040000;
} */

.clothes-list-row-item-details-container {
    margin-top: 45px;
    width: 210px;
}

.clothes-list-row-item-details-brand {
    color: #231815;
    font-size: 14px;
    font-weight: bold;
}

.clothes-list-row-item-details-name {
    color: #231815;
    font-size: 14px;
}

.clothes-list-row-item-details-rmb {
    margin-top: 27px;
    font-family: MiSansVF, MiSansVF;
    font-weight: bold;
    font-size: 24px;
    color: #231815;
    line-height: 33px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.clothes-list-row-item-details-item {
    font-size: 14px;
    font-family: Ansley Display;
    font-weight: 900;
    line-height: 21px;
    color: #231815;
}

.clothes-list-row-item-details-color {
    display: flex;
}

.clothes-list-row-item-details-color-black {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border: 1px solid #040000;
    border-radius: 2px;
    background-color: #040000;
}

.clothes-list-row-item-details-color-grey {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border: 1px solid #040000;
    border-radius: 2px;
    background-color: #515151;
}

.clothes-details {
    width: 100%;
    height: max(900px, calc(100vh - 90px));
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.clothes-details-left {
    width: calc(100vw - 770px);
    height: max(900px, calc(100vh - 90px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.clothes-details-left-main {
    width: 650px;
    height: 650px;
}

.clothes-details-left-main-image {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.clothes-details-left-icon {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.clothes-details-left-icon-item {
    width: 20px;
    height: 10px;
    margin-left: 2px;
    margin-right: 2px;
    border: 1px solid #040000;
    border-radius: 5px;
    cursor: pointer;
}

.clothes-details-left-icon-item-active {
    width: 20px;
    height: 10px;
    margin-left: 2px;
    margin-right: 2px;
    border: 1px solid #040000;
    border-radius: 5px;
    background-color: #040000;
}

.clothes-details-left-thumb {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clothes-details-left-thumb-item {
    width: 153px;
    height: 153px;
    /* padding: 15px; */
    margin: 0 15px;
    cursor: pointer;
    opacity: 0.6;
}

.clothes-details-left-thumb-item-active {
    width: 153px;
    height: 153px;
    /* padding: 15px; */
    margin: 0 15px;
    cursor: pointer;
    border: 1px solid #040000;
}

.clothes-details-left-thumb-item-image {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.clothes-details-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #040000;
    height: 100%;
    width: 770px;
    color: #231815;
    position: relative;
}

.clothes-details-right-info-close {
    cursor: pointer;
    position: absolute;
    top: 30px;
    right: 30px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.clothes-details-right-info-close::before,
.clothes-details-right-info-close::after {
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: calc(2px / -2);
    content: '';
    background: #000;
}

.clothes-details-right-info-close::before {
    transform: rotate(-45deg);
}

.clothes-details-right-info-close::after {
    transform: rotate(45deg);
}

.clothes-details-right-info {
    height: 390px;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.clothes-details-right-info-brand {
    font-weight: 800;
    font-size: 16px;
}

.clothes-details-right-info-name {
    font-weight: 400;
    font-size: 14px;
    margin-top: 5px;
}

.clothes-details-right-info-rmb {
    font-family: MiSans, MiSans;
    font-weight: 800;
    font-size: 24px;
    color: #231815;
    line-height: 43px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.clothes-details-right-info-material {
    font-weight: 400;
    font-size: 14px;
}

.clothes-details-right-info-code {
    font-weight: 400;
    font-size: 14px;
    margin-top: 5px;
}

.clothes-details-right-detail {
    border-top: 1px solid #040000;
    border-bottom: 1px solid #040000;
    font-weight: 400;
    font-size: 14px;
    color: #231815;
}

.clothes-details-right-detail-title {
    height: 60px;
    padding-left: 50px;
    padding-right: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clothes-details-right-detail-info {
    margin-bottom: 20px;
    padding-left: 100px;
    padding-right: 30px;
    font-weight: 400;
    font-size: 8px;
    color: #231815;
}

.clothes-details-right-detail-info-item {
    padding-bottom: 10px;
}

.clothes-details-right-detail-icon::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    cursor: pointer;
}

.clothes-details-right-detail-extend-icon::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    cursor: pointer;
}

.clothes-details-right-size-list {
    padding-left: 50px;
    display: flex;
    flex-direction: column;
}

.clothes-details-right-size-box {
    margin-top: 30px;
    display: flex;
}

.clothes-details-right-size-box-item {
    width: 100px;
    height: 40px;
    margin-right: 30px;
    border: 1px solid #040000;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 900;
    color: #040000;
    line-height: 24px;
}

.shoes-details-right-size-box-item {
    width: 40px;
    height: 40px;
    margin-right: 11px;
    border: 1px solid #040000;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 900;
    color: #040000;
}

.clothes-details-right-size-guide {
    font-weight: 600;
    font-size: 10px;
    text-decoration: underline;
    cursor: pointer;
    color: #231815;
    margin-top: 20px;
    display: flex;
    padding-left: 570px;
}

.clothes-details-right-buy {
    margin-top: 40px;
    padding-left: 50px;
    display: flex;
}

.clothes-details-right-buy-button {
    height: 40px;
    width: 380px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7C7C7C;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.clothes-details-right-buy-cart {
    margin-left: 10px;
    height: 40px;
    width: 240px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7C7C7C;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.clothes-details-right-buy-cart-icon {
    margin-right: 10px;
}

.clothes-details-right-prompt {
    margin-top: 35px;
    padding-left: 50px;
    font-weight: 600;
    font-size: 14px;
    color: #231815;
}

.clothes-details-right-services {
    margin-top: 45px;
    margin-bottom: 45px;
    display: flex;
    justify-content: center;
}

.clothes-details-right-size-table {
    margin-top: 30px;
    /* width: calc(100% - 30px); */
}

.clothes-details-right-size-table-row {
    margin-bottom: 5px;
    display: flex;
    /* justify-content: space-between; */
}

.clothes-details-right-size-table-row-lable {
    width: 90px;
    height: 27px;
    border-radius: 3px;
    background-color: #040000;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* font-weight: 900; */
    font-size: 8px;
    color: #FFFFFF;
}

.clothes-details-right-size-table-row-item {
    width: 40px;
    height: 25px;
    border: 1px solid #040000;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 8px;
    color: #040000;
    margin-left: 2px;
    margin-right: 2px;
}

.cl-vintage-list {
    position: relative;
}

.classification {
    position: fixed;
    top: 150px;
    left: 16px;
    z-index: 1;
}

.classification-item {
    width: 180px;
    height: 30px;
    font-size: 15px;
    /* font-weight: 600; */
    color: #040000;
    margin-bottom: 13px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid #040000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.classification-item:hover {
    color: #ffffff;
    background-color: #040000;
}

.classification-item-active {
    width: 180px;
    height: 29px;
    font-size: 15px;
    /* font-weight: 600; */
    color: #ffffff;
    background-color: #040000;
    margin-bottom: 13px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid #040000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl-vintage-list-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl-vintage-list-row-item {
    width: 300px;
    height: 430px;
    margin: 10px 40px;
}

.cl-vintage-list-row-item-image {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    cursor: pointer;
}

.cl-vintage-list-row-item-image:hover {
    border: 1px solid #040000;
}

.events-content-mask {
    position: absolute;
    top: 138px;
    left: 0;
    background-color: #FFFFFF;
    opacity: 0.6;
    height: max(492px, calc(100vh - 228px));
    width: 100%;
}

.events-content1 {
    position: absolute;
    top: 138px;
    left: 0;
    height: max(492px, calc(100vh - 228px));
    width: 100%;
    font-size: 90px;
    font-weight: 900;
    color: #231815;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auto-hide {
    -moz-animation: hideAnimation 0s ease-in 3s forwards;
    /* Firefox */
    -webkit-animation: hideAnimation 0s ease-in 3s forwards;
    /* Safari and Chrome */
    -o-animation: hideAnimation 0s ease-in 3s forwards;
    /* Opera */
    animation: hideAnimation 0s ease-in 3s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes hideAnimation {
    to {
        width: 0;
        height: 0;
        overflow: hidden;
    }
}

@-webkit-keyframes hideAnimation {
    to {
        width: 0;
        height: 0;
        visibility: hidden;
    }
}

.events-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: max(492px, calc(100vh - 228px));
}

.events-content-title {
    font-size: 18px;
    font-family: Ansley Display;
    font-weight: 900;
    color: #040000;
    width: 692px;
    margin-top: 30px;
}

.events-content-video {
    width: 692px;
    height: 340px;
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid #ffffff;
}

.events-content-video-active {
    width: 100%;
    height: max(492px, calc(100vh - 228px));
    position: relative;
}

.events-content-video-play {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 24px;
    height: 24px;
    z-index: 10;
}

.events-content-video-play:hover {
    cursor: pointer;
}

.events-content-video-sound {
    position: absolute;
    left: 60px;
    bottom: 30px;
    width: 24px;
    height: 24px;
    z-index: 10;
}

.events-content-video-sound:hover {
    cursor: pointer;
}

.events-content-video-full-screen {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 24px;
    height: 24px;
    z-index: 10;
}

.events-content-video-full-screen:hover {
    cursor: pointer;
}

.events-content-video-play-image {
    width: 100%;
    height: 100%;
}

.events-content-video-widget {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-content {
    position: relative;
}

.services-content {
    height: calc(100vh - 90px);
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.services-content-text {
    height: 24px;
    font-size: 24px;
    font-weight: normal;
    color: #231815;
    /* font-family: OPPOSans; */
}

.services-content-engtext {
    margin-top: 13px;
    height: 10px;
    font-size: 14px;
    font-weight: 900;
    color: #231815;
}

.services-content-im {
    margin-top: 76px;
    display: flex;
    justify-content: center;
}

.services-content-im-item {
    margin: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services-content-im-button {
    width: 142px;
    height: 57px;
    border-radius: 10px;
    background-color: #040000;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.services-content-im-text {
    margin-top: 8px;
    height: 14px;
    font-size: 14px;
    font-family: OPPOSans;
    font-weight: normal;
    color: #231815;
}

.services-content-im-button .services-content-im-tooltip {
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    width: 220px;
    height: 110px;
    margin-left: -110px;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #ffffff;
    border: solid 1px #040000;
}

.services-content-im-button .services-content-im-tooltip1 {
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    width: 110px;
    height: 110px;
    margin-left: -55px;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #ffffff;
    border: solid 1px #040000;
}

.services-content-im-tooltip-image {
    display: block;
    width: 100px;
    height: 100px;
}

.services-content-im-button .services-content-im-tooltip::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #040000 transparent transparent transparent;
}

.services-content-im-button .services-content-im-tooltip1::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #040000 transparent transparent transparent;
}

.services-content-im-button:hover .services-content-im-tooltip {
    visibility: visible;
}

.services-content-im-button:hover .services-content-im-tooltip1 {
    visibility: visible;
}

.chrislv-content {
    height: 732px;
    border-bottom: 1px solid #040000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chrislv-content-title {
    margin-top: 123px;
    margin-bottom: 60px;
    height: 18px;
    font-size: 24px;
    font-weight: 900;
    color: #231815;
}

.chrislv-content-paragraph {
    width: 1218px;
    font-size: 14px;
    font-weight: 900;
    color: #231815;
    line-height: 24px;
    margin-bottom: 20px;
}

.right-align {
    text-align: right;
}

.question-id {
    width: 1348px;
    height: 10px;
    font-size: 14px;
    font-weight: 900;
    color: #231815;
    line-height: 24px;
}

.question {
    margin-top: 41px;
    width: 1300px;
    height: 13px;
    font-size: 14px;
    font-weight: 900;
    color: #231815;
    line-height: 24px;
}

.answer {
    margin-top: 30px;
    margin-bottom: 125px;
    width: 1300px;
    height: 63px;
    font-size: 14px;
    font-weight: 900;
    color: #231815;
    line-height: 24px;
}

.answer-text-button {
    height: 28px;
    padding: 0 5px;
    background-color: #040000;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
}

.address-engtext {
    font-size: 14px;
    font-family: Ansley Display;
    font-weight: 900;
    color: #231815;
    line-height: 21px;
}

.address-text {
    margin-top: 21px;
    font-size: 14px;
    font-family: OPPOSans-R;
    font-weight: 900;
    color: #231815;
    line-height: 21px;
}

.address-image {
    margin-top: 24px;
    width: 100px;
    height: 100px;
}

.offline-stores-list-row {
    height: 350px;
    /* scroll-snap-align: start; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 50px;
    margin-bottom: 50px;
}

.offline-stores-container {
    width: 1200px;
    border-bottom: 1px solid #040000;
    padding-bottom: 50px;
}

.offline-stores {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #040000;
}

.offline-stores-name {
    font-weight: 800;
}

.offline-stores-info {
    font-weight: 400;
    margin-top: 20px;
    text-transform: none;
}

.offline-stores-affiliated {
    font-family: MiSans, MiSans;
    font-weight: 500;
    font-size: 56px;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.offline-stores-affiliated-list-row {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    flex-direction: column;
    gap: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
    /* border: 1px solid #ccc; */
}

.store-group {
    display: flex;
    justify-content: start;
    justify-items: start;
    gap: 20px;
    width: 1200px;
    /* border: 1px solid #ccc; */
    box-sizing: border-box;
}

.store-item {
    flex: 1;
    padding: 20px;
    height: 100px;
    width: 50%;
    max-width: 600px;
}

.store-group:last-child {
    justify-content: left;
}

.store-location {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.store-province {
    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 200;
    font-size: 33px;
    color: #040000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.store-mall {
    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 200;
    font-size: 24px;
    color: #040000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.store-address {
    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 200;
    font-size: 16px;
    color: #040000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.offline-stores-image-list {
    margin-top: 45px;
    display: flex;
    align-items: center;
}

.offline-stores-image-list-item {
    height: 182px;
    width: 272px;
    margin-left: 8px;
    margin-right: 8px;
}

.main-contact-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.main-contact-us-box {
    margin-top: 50px;
    width: 849px;
    height: 44px;
    padding-left: 45px;
    padding-right: 15px;
    border: 1px solid #040000;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-contact-us-box-title {
    font-weight: 400;
    font-size: 14px;
    color: #040000;
    text-transform: none;
}

.main-contact-us-box-icon {
    width: 70px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid #040000;
    background-color: #040000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-contact-us-box-icon-image {
    height: 16px;
}

.main-contact-us-image {
    margin-top: 40px;
    width: 150px;
    height: 150px;
}

.event-list {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.event-list-box {
    width: 1240px;
    /* height: 360px; */
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 75px;
    padding-right: 36px;
    padding-top: 36px;
    padding-bottom: 75px;
    border: 1px solid #040000;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.event-list-box-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.event-list-box-title-left {
    display: flex;
    font-weight: 800;
    font-size: 22px;
    color: #040000;
    border-bottom: 1px solid #040000;
}

.event-list-box-title-date {
    margin-right: 50px;
}

.event-list-box-title-name {
    cursor: pointer;
}

.event-list-box-introduction {
    font-weight: 400;
    font-size: 14px;
    color: #040000;
    margin-top: 20px;
    width: 100%;
}

.event-list-box-images {
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.event-list-box-images-item {
    width: calc(100% / 4 - 10px);
    height: 180px;
}

.event-list-box-detail-text {
    font-weight: 400;
    font-size: 14px;
    color: #040000;
    margin-top: 100px;
    margin-bottom: 100px;
}

.event-list-box-detail-image {
    width: 100%;
    margin-bottom: 20px;
}

.event-list-box-detail-image-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.event-list-box-detail-image-box-item {
    width: calc(100% / 2 - 10px);
}

.event-list-box-detail-image-box-item1 {
    width: calc(100% / 3 - 10px);
}

.events-video {
    width: 100%;
    height: 600px;
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid #ffffff;
}

.events-video-active {
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
}

.events-video-play-new {
    position: absolute;
    left: calc(50% - 50px);
    bottom: calc(50% - 50px);
    width: 100px;
    height: 100px;
    opacity: 0.5;
    z-index: 10;
}

.events-video-play-new:hover {
    cursor: pointer;
}

.events-video-play {
    position: absolute;
    left: 60px;
    bottom: 30px;
    width: 24px;
    height: 24px;
    opacity: 0.5;
    z-index: 10;
}

.events-video-play:hover {
    cursor: pointer;
}

.events-video-sound {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 24px;
    height: 24px;
    opacity: 0.5;
    z-index: 10;
}

.events-video-sound:hover {
    cursor: pointer;
}

.events-video-full-screen {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 24px;
    height: 24px;
    opacity: 0.5;
    z-index: 10;
}

.events-video-full-screen:hover {
    cursor: pointer;
}

.events-video-play-image {
    width: 100%;
    height: 100%;
}

.events-video-widget {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 活动卡片容器 */
.event-card {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 标题栏（可点击折叠） */
.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9f9f9;
    cursor: pointer;
}

.event-header:hover {
    background: #f5f5f5;
}

.event-title {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-date {
    font-size: 14px;
    color: #666;
}

/* 内容区域容器 - 统一样式 */
.event-section {
    padding: 16px;
}

.event-preview {
    border-bottom: 1px dashed #eee;
}

/* 更多内容提示 */
.show-more {
    color: #666;
    text-align: center;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    background-color: #f9f9f9;
}

.show-more:hover {
    background-color: #f5f5f5;
}

/* 内容行容器 - 每个集合元素作为一行 */
.content-row {
    margin-bottom: 16px;
}

.content-row:last-child {
    margin-bottom: 0;
}

/* 文本样式 */
.text-content {
    line-height: 1.6;
    color: #333;
}

.text-item {
    margin-bottom: 8px;
    /* 禁用大写 */
    text-transform: none;
}

.text-item:last-child {
    margin-bottom: 0;
}

/* 保留换行符并自动换行 */
.white-space-pre-line {
    white-space: pre-line;
}

/* 图片布局：一行显示，根据数量自动平分 */
.image-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}

.image-grid-cover-extra {
    margin-top: 40px;
}

.image-grid-flod-extra {
    margin-top: 40px;
}

.image-grid img {
    display: block;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* .image-grid img:hover {
    transform: scale(1.03);
} */

/* 图片数量适配（1-6张） */
.image-grid[data-count="1"] img {
    width: 100%;
}

.image-grid[data-count="2"] img {
    width: calc(50% - 10px);
}

.image-grid[data-count="3"] img {
    width: calc(100% / 3 - 10px);
}

.image-grid[data-count="4"] img {
    width: calc(25% - 10px);
}

.image-grid[data-count="5"] img {
    width: calc(20% - 6.4px);
}

.image-grid[data-count="6"] img {
    width: calc(100% / 6 - 6.67px);
}

/* 视频样式 */
/* .events-video,
.events-video-active {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; */
/* 16:9比例 */
/* } */

/* .events-video-widget {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

.events-video-play-new,
.events-video-play,
.events-video-sound,
.events-video-full-screen {
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.events-video-play-new,
.events-video-play {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.events-video-sound {
    bottom: 15px;
    left: 15px;
}

.events-video-full-screen {
    bottom: 15px;
    right: 15px;
}

.events-video-play-image {
    width: 20px;
    height: 20px;
} */

/* 隐藏内容的样式 */
.content-hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .image-grid {
        flex-wrap: wrap;
    }

    .image-grid[data-count="3"] img,
    .image-grid[data-count="4"] img,
    .image-grid[data-count="5"] img,
    .image-grid[data-count="6"] img {
        width: calc(50% - 4px);
    }
}

@media (max-width: 480px) {
    .image-grid img {
        width: 100% !important;
        margin-bottom: 8px;
    }

    .image-grid {
        gap: 0;
    }
}

/* 新增视频容器相对定位 */
.video-container {
    position: relative;
    width: 100%;
}

/* 重新规划按钮布局 */
.music-video-play-new {
    position: absolute;
    left: 50%;
    bottom: calc(50% - 60px);
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    opacity: 0.5;
    z-index: 10;
    cursor: pointer;
}

.music-video-play-new:hover {
    cursor: pointer;
}

.music-video-play {
    position: absolute;
    left: 50px;
    bottom: 20px;
    width: 24px;
    height: 24px;
    opacity: 0.5;
    z-index: 10;
    cursor: pointer;
}

.music-video-play:hover {
    cursor: pointer;
}

.music-video-sound {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 24px;
    height: 24px;
    opacity: 0.5;
    z-index: 10;
    cursor: pointer;
}

.music-video-sound:hover {
    cursor: pointer;
}

.music-video-full-screen {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 24px;
    height: 24px;
    opacity: 0.5;
    z-index: 10;
    cursor: pointer;
}

.music-video-full-screen:hover {
    cursor: pointer;
}

.music-video-play-image {
    width: 100%;
    height: 100%;
}

.music-video-logo {
    display: flex;
    align-items: flex-end;
    margin: 20px 0;
}

.music-video-logo-img {
    width: 182px;
    height: 100px;
    margin-left: 60px;
}

.music-video-logo-text {
    font-weight: 250;
    margin-left: 50px;
    font-size: 16px;
    font-family: MiSansVF, MiSansVF;
    color: #000000;
    text-transform: none;
}

.main-video {
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */
}

.main-video-item {
    height: 100%;
    width: 46%;
    margin: 0 25px;
    margin-top: 60px;
}

.events-video-bottom-txt {
    display: flex;
    align-items: flex-end;
}

.events-video-bottom-txt-left {
    font-weight: bold;
    font-size: 33px;
    font-family: MiSansVF, MiSansVF;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.events-video-bottom-txt-middle {
    font-weight: 500;
    font-size: 16px;
    font-family: MiSansVF, MiSansVF;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.events-video-bottom-txt-right {
    font-weight: 500;
    font-size: 16px;
    font-family: MiSansVF, MiSansVF;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}