/* 活动预告详情 */
.about-event-title {
    font-size: 30px;
    font-weight: bold;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    margin-bottom: 20px;
}

.events-details {
    padding: 25px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    background-color: #f9f7f3;
    margin-bottom: 20px;
    position: relative;
}

.events-details::after {
    content: "";
    position: absolute;
    top: 20%; right: 0;
    width: 120px; height: 5px;
    background-color: var(--font-brown);
    -webkit-transform: translateX(30%);
    -moz-transform: translateX(30%);
    -ms-transform: translateX(30%);
    -o-transform: translateX(30%);
    transform: translateX(30%);
}

.events-details > * + * { margin-top: 16px; }

.events-details .caption,
.apply .caption {
    font-size: 18px;
    font-weight: bold;
    flex-shrink: 0;
}

.events-details .registration-time {
    font-size: 26px;
    text-align: center;
    font-family: "font", system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    color: var(--font-brown);
}

.form-of-activity, .free-place { display: flex; }

.apply {
    --box-bg: var(--font-brown);
    --radius-size: 10px !important;
    --radius-blur: 12px !important;

    padding: 25px;
}

.apply .left-methods {
    color: var(--font-white);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    display: flex;
}

.apply .methods p + p  { margin-top: 8px; }

.apply .methods p:nth-child(3),
.apply .methods p:nth-child(5) { margin-bottom: 20px; }
.apply .right-image { padding: 10px; border: 1px solid var(--font-white); }
.apply .right-image img { width: 100%; }

/* 文创详情 */
.cultural-ratio-wrap { width: 77.7%; margin-left: auto; }

.cultural-custom-ratio { padding-bottom: 61%; }

.cultural-details-item { position: relative; }

.cultural-details-title {
    color: var(--font-white);
    position: absolute;
    top: 50%; left: 0;
    letter-spacing: .1em;
    padding: 30px 100px;
    background-color: var(--font-brown);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.card-left-intro {
    color: var(--font-white);
    padding: 30px;
    letter-spacing: 0.5px;
    max-width: 70%; flex-shrink: 0;
}
.card-left-intro > p { line-height: 2; }
.card-left-intro .caption,
.designer-appraise .caption,
.means-of-purchase .caption {
    font-size: 22px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.card-right-cultural-relics {
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    max-width: 50%; height: 20vw;
}

.card-right-cultural-relics img { 
    max-height: 100%;
    max-width: 100%;
}

.cultural-relics-business-card {
    margin-top: 80px;
    background-image: linear-gradient(
        to right, 
        var(--font-brown) 0%,
        var(--font-brown) calc(100% - 40px),
        transparent calc(100% - 40px),
        transparent 100%
    );
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.designer-appraise { margin-top: 50px; letter-spacing: 0.5px; line-height: 2; }

.means-of-purchase {
    padding: 30px 40px;
}

.means-of-purchase .purchase {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.means-of-purchase .purchase p { line-height: 2; }

.means-of-purchase .caption { font-size: 18px; margin-bottom: 0; }

.purchase-information {
    padding: 10px !important;
    border: 1px solid var(--font-brown);
}

.purchase-information img { width: 100%; height: auto; }

.means-of-purchase { margin-top: 50px; }

@media (max-width: 1199px) {
    .free-place { margin-top: 16px; }

    .card-left-intro { font-size: 16px; }
}

@media (max-width: 991px) {
    .apply .right-image { text-align: center; margin-top: 25px; }
    .apply .right-image img { max-width: 100%; width: auto; }

    .about-events, .apply,
    .events-details .caption,
    .apply .caption { font-size: 16px; }

    .events-details > * + * { margin-top: 12px; }

    .apply .methods p:nth-child(3),
    .apply .methods p:nth-child(5) { margin-bottom: 16px; }
}

@media (max-width: 991px) {
    :root {
        --minimum-size: 16px;
    }

    .purchase-information {
        margin-top: 30px;
    }

    .card-left-intro, .card-right-cultural-relics { max-width: 100%; width: 100%; }

    .card-right-cultural-relics { 
        height: auto; padding: 0 30px 30px;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .cultural-details-title { padding: 20px 30px; }

    .cultural-relics-business-card {
        -ms-flex-direction: column;
        flex-direction: column;
        background-color: var(--font-brown);
        margin-top: 50px;
    }
}

@media (max-width: 767px) {
    .means-of-purchase,
    .card-left-intro {
        padding: 20px 20px;
    }

    .card-right-cultural-relics { padding: 0px 20px 20px; }

    .cultural-details-title {
        padding: 12px 0;
        position: static;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .cultural-ratio-wrap { width: 100%; }

    .cultural-relics-business-card,
    .means-of-purchase {
        margin-top: 30px;
    }
}

@media (max-width: 576px) {
    .common-component-content-container {
        padding: 0;
    }

    .events-details::after {
        top: 10%;
        -webkit-transform: translateX(10%);
        -moz-transform: translateX(10%);
        -ms-transform: translateX(10%);
        -o-transform: translateX(10%);
        transform: translateX(10%);
    }
}