/* 通用重置 & 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设计稿基准宽度1920px，用于计算缩放比例 */
:root {
    --design-width: 1920;
    --scale: calc(100vw / var(--design-width));
    --min-scale: calc(1400 / var(--design-width));
}

/* 当屏幕宽度小于1400px时，使用最小缩放比例 */
@media (max-width: 1400px) {
    :root {
        --scale: 0.7px;
    }
}

body {
    font-family: "微软雅黑", sans-serif;
    color: #333;
    background-color: #fff;
    line-height: 1.6;
    min-width: 1400px;
    overflow-x: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* 头部 Banner */
.banner {
    position: relative;
    height: calc(1074 * var(--scale));
    min-height: calc(1074 * var(--min-scale));
    background: url("../img/top_bg.png") no-repeat center bottom;
    background-size: cover;
    overflow: hidden;
    color: #fff;
}

.logo {
    position: absolute;
    top: calc(20 * var(--scale));
    left: calc(20 * var(--scale));
    font-size: calc(24 * var(--scale));
    font-weight: bold;
}

.back-btn {
    position: absolute;
    top: calc(20 * var(--scale));
    right: calc(20 * var(--scale));
    padding: calc(6 * var(--scale)) calc(12 * var(--scale));
    /* border: 1px solid #fff; */
    /* background: transparent; */
    /* color: #fff; */
    cursor: pointer;
    /* border-radius: 4px; */
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: calc(1300 * var(--scale));
}

.banner-content h1 {
    font-size: calc(32 * var(--scale));
    margin-bottom: calc(20 * var(--scale));
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.hexagon-group {
    display: flex;
    justify-content: center;
    gap: calc(10 * var(--scale));
    flex-wrap: wrap;
}

.hexagon {
    width: calc(80 * var(--scale));
    height: calc(92 * var(--scale));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
}

.hexagon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 活动介绍 */
.intro {
    background: linear-gradient(to bottom,
            #C6F0F7 0%,
            #C6F0F7 50%,
            #F2FDFF 62%,
            #F2FDFF 75%,
            #FFFFFF 87.5%);
    box-sizing: border-box;
    padding: calc(56 * var(--scale)) calc(258 * var(--scale)) calc(358 * var(--scale));
    position: relative;
}

.intro h2 {
    text-align: center;
    font-size: calc(28 * var(--scale));
    /* margin-bottom: 20px; */
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
}

.intro::after {
    position: absolute;
    bottom: calc(45 * var(--scale));
    ;
    content: "";
    background: url("../img/img_bottom.png") no-repeat center;
    background-size: cover;
    width: 100%;
    height: calc(313 * var(--scale));
    left: 0;
    z-index: 2;
}



/* 页脚 */
.footer {
    padding: calc(40 * var(--scale)) calc(130 * var(--scale)) calc(40 * var(--scale)) calc(78 * var(--scale));
    background-color: #08C4DF;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* gap: 70px; */
}

.footer-logo {
    font-size: calc(24 * var(--scale));
    font-weight: bold;
    margin-right: calc(70 * var(--scale));
}

.copyright {
    /* text-align: center; */
    flex: 1;
    font-size: calc(14 * var(--scale));
    display: flex;
    justify-content: space-between;
    /* gap: 20px; */
    align-items: center;
    font-size: calc(22 * var(--scale));
    color: #FFFFFF;
    line-height: calc(40 * var(--scale));
}

.qrcodes {
    display: flex;
    /* gap: 20px; */
    margin-left: calc(70 * var(--scale));
}

.qrcode-item {
    text-align: center;
    font-size: calc(20 * var(--scale));
    color: #FFFFFF;
    line-height: calc(25 * var(--scale));
}

.qrcode-item+.qrcode-item {
    margin-left: calc(20 * var(--scale));
}

.qrcode-item img {
    width: calc(119 * var(--scale));
    height: calc(119 * var(--scale));
    margin-bottom: calc(5 * var(--scale));
}

.header-nav {
    width: calc(1400 * var(--scale));
    margin: 0 auto;
}

.nav-info {
    font-size: calc(36 * var(--scale));
    color: #000000;
    line-height: calc(43 * var(--scale));
    margin-left: calc(62 * var(--scale));
    margin-bottom: 7px;
}

.time-source {
    margin-left: calc(22 * var(--scale));
    font-size: calc(24 * var(--scale));
    color: #000000;
    margin-top: calc(27 * var(--scale));
}

.detail_line img {
    width: 100%;
}

.flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mr-65 {
    margin-right: calc(65 * var(--scale));
}

.size-box {
    display: flex;
}

.size-type {
    width: calc(32 * var(--scale));
    height: calc(32 * var(--scale));
    background: #08C4DF;
    border-radius: 50%;
    line-height: calc(32 * var(--scale));
    margin-right: calc(20 * var(--scale));
}


.detail-title {
    font-weight: 600;
    font-size: 64px;
    color: #08C4DF;
    line-height: calc(120 * var(--scale));
    display: flex;
    justify-content: center;
    margin-top: calc(30 * var(--scale));
}

video {
    /* max-width: calc(786 * var(--scale)); */
    display: block;
    /* margin: calc(24 * var(--scale)) auto; */
}

.time-source.big_size {
    font-size: calc(42 * var(--scale));
}

.detail-title.big_size {
    font-size: calc(84 * var(--scale));
}

.time-source.small_size {
    font-size: calc(22 * var(--scale));
}

.detail-title.small_size {
    font-size: calc(44 * var(--scale));
}

.detail_line {
    background: url("../img/detail_line.png") no-repeat center center;
    background-size: cover;
    position: relative;
    height: 8px;
}

/* .share-icon img {
    width: 24px;
    margin-left: 20px;
} */