:root {
    --vw-1920: calc(100vw / 1920);
    --vw-750: calc(100vw / 750);
}

/* 通用图片过渡效果 */
.card img,
.message-img {
    transition: transform 0.3s ease;
}

.card img:hover,
.message-img:hover {
    transform: scale(1.1);
}

/* encryption 子元素过渡效果 */
.encryption>div {
    transition: transform 0.3s ease;
    box-sizing: border-box;
    background-color: #F3F3F3;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.encryption>div:hover {
    transform: translateY(-10px);
}

/* 字体和颜色基础设置 */
body {
    font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.Section,
.Simple {
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.Section {
    text-align: center;
    color: #0A430E;
    font-weight: bold;
}

.Security {
    text-align: center;
    font-weight: 500;
    color: inherit;
}

.information {
    box-sizing: border-box;
    text-align: center;
    background-color: #BCFFC2;
    color: #425E70;
    font-weight: 500;
}

/* encryption 内部标题和底部文字 */
.encryption .title,
.encryption .bottom {
    font-weight: 600;
    color: #000;
}

/* 大屏样式 */
@media screen and (min-width: 769px) {
    .Section {
        font-size: calc(50 * var(--vw-1920));
        margin: calc(130 * var(--vw-1920)) 0 calc(90 * var(--vw-1920));
    }

    .Simple {
        display: none;
    }

    .Section-show {
        display: inline;
    }

    .card {
        display: flex;
        gap: calc(24 * var(--vw-1920));
        margin: 0 calc(260 * var(--vw-1920));
    }

    .card img {
        width: calc(332 * var(--vw-1920));
        height: calc(429 * var(--vw-1920));
        flex-shrink: 0;
    }

    .Requirements {
        margin-top: calc(100 * var(--vw-1920));
    }

    .Security {
        margin-top: calc(100 * var(--vw-1920));
        font-size: calc(60 * var(--vw-1920));
    }

    .information {
        border-radius: calc(60 * var(--vw-1920));
        padding: calc(38 * var(--vw-1920)) calc(49 * var(--vw-1920));
        margin: calc(68 * var(--vw-1920)) calc(260 * var(--vw-1920)) 0;
        font-size: calc(26 * var(--vw-1920));
    }

    .encryption {
        display: flex;
        justify-content: space-between;
        margin: calc(107 * var(--vw-1920)) calc(260 * var(--vw-1920)) 0;
        gap: 0;
    }

    .encryption>div {
        width: calc(448 * var(--vw-1920));
        height: calc(480 * var(--vw-1920));
        padding: calc(63 * var(--vw-1920)) 0 calc(21 * var(--vw-1920));
        border-radius: calc(75 * var(--vw-1920));
    }

    .encryption-img {
        width: calc(128 * var(--vw-1920));
        height: calc(128 * var(--vw-1920));
    }

    .encryption .title {
        margin: 0 calc(64 * var(--vw-1920));
        width: calc(320 * var(--vw-1920));
        font-size: calc(38 * var(--vw-1920));
    }

    .encryption .bottom {
        margin: 0 calc(40 * var(--vw-1920));
        width: calc(367 * var(--vw-1920));
        height: calc(79 * var(--vw-1920));
        font-size: calc(18 * var(--vw-1920));
    }

    .message-img {
        display: block;
        margin: calc(24 * var(--vw-1920)) calc(260 * var(--vw-1920)) 0;
    }

    .message-img-h5 {
        display: none;
    }
}

/* 小屏样式 */
@media screen and (max-width: 768px) {
    .card {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        gap: calc(24 * var(--vw-750));
        width: 100vw;
        padding: 0 calc(31 * var(--vw-750));
    }

    .card img {
        flex: 1 1 auto;
        width: calc(332 * var(--vw-750));
        height: calc(429 * var(--vw-750));
        object-fit: cover;
    }

    .Section {
        font-size: calc(36 * var(--vw-750));
        margin: calc(45 * var(--vw-750)) 0 calc(6 * var(--vw-750));
    }

    .Simple {
        display: block;
        font-weight: 400;
        font-size: calc(36 * var(--vw-750));
        color: #4B5563;
        text-align: center;
        margin-bottom: calc(60 * var(--vw-750));
    }

    .Section-show {
        display: none;
    }

    .Requirements {
        margin-top: calc(62 * var(--vw-750));
    }

    .Security {
        margin-top: calc(50 * var(--vw-750));
        font-size: calc(60 * var(--vw-750));
    }

    .information {
        border-radius: calc(60 * var(--vw-750));
        padding: calc(38 * var(--vw-750)) calc(49 * var(--vw-750));
        margin: calc(62 * var(--vw-750)) calc(24 * var(--vw-750)) 0;
        font-size: calc(26 * var(--vw-750));
    }

    .encryption {
        display: flex;
        flex-direction: column;
        margin: calc(24 * var(--vw-750)) calc(24 * var(--vw-750)) 0;
        gap: calc(24 * var(--vw-750));
    }

    .encryption>div {
        width: 100%;
        height: calc(480 * var(--vw-750));
        padding: calc(63 * var(--vw-750)) 0 calc(21 * var(--vw-750));
        border-radius: calc(75 * var(--vw-750));
        margin-bottom: 0;
        /* 由 gap 控制间距 */
    }

    .encryption-img {
        width: calc(128 * var(--vw-750));
        height: calc(128 * var(--vw-750));
    }

    .encryption-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .encryption .title {
        margin: 0 calc(64 * var(--vw-750));
        width: calc(320 * var(--vw-750));
        font-size: calc(38 * var(--vw-750));
    }

    .encryption .bottom {
        margin: 0 calc(40 * var(--vw-750));
        width: calc(367 * var(--vw-750));
        height: calc(79 * var(--vw-750));
        font-size: calc(18 * var(--vw-750));
    }

    .message-img {
        display: none;
    }

    .message-img-h5 {
        display: block;
        margin: calc(24 * var(--vw-750)) calc(24 * var(--vw-750)) 0;
    }
}