/* 主要内容区域样式 */
.hero {
    background: url('../img/main-bg.webp') no-repeat center;
    background-size: cover;
    height: 25.99vw;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-title {
    width: 100%;
    font-size: 3.906vw;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 关于我们页面主要部分 */
.about-section {
    background: #000000;
    width: 100%;
    height: 128.854vw;
    display: flex;
    flex-direction: column;
    padding: 2vw 3vw;
    justify-content: center;
    align-items: center;
}

/* 标题和描述通用样式 */
.about-title {
    font-size: 1.875vw;
    background: linear-gradient(to right,
            rgba(242, 227, 198, 1) 0%,
            rgba(175, 153, 134, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'HarmonyOS Sans', Arial, sans-serif !important;
}

.about-description {
    font-size: 0.938vw;
    color: #BEBEBE;
    letter-spacing: 0.4vw;
    margin-top: 2vw;
    line-height: 2vw;
    font-family: 'HarmonyOS Sans', Arial, sans-serif !important;
}

/* 内容容器通用样式 */
.about-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.about-content .about-description {
    margin-top: 2vw;
    line-height: 2.1vw;
}

/* 布局容器通用样式 */
.about-intro,
.about-features,
.about-mission {
    width: 64.805vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
}

/* 介绍部分 */
.about-intro {
    background: linear-gradient(to right,
            rgba(217, 217, 217, .2) 0%,
            rgba(115, 115, 115, .2) 100%);
}

.about-intro-left,
.about-intro-right {
    padding: 0 4.5vw;
    display: flex;
    justify-content: center;
    height: 25.104vw;
    width: 50%;
}

.about-intro-left {
    align-items: center;
}

.about-intro-right {
    align-items: center;
}

.about-feature-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 4vw;
    margin-bottom: 2vw;
}

.en-title{
    font-size: 1.458vw;
    color: #D8C7AE;
    letter-spacing: 0.6vw;
    font-family: 'HarmonyOS Sans', Arial, sans-serif !important;
}

.zh-title{
    margin-top: 1vw;
    font-size: 2.5vw;
    color: #FFFFFF;
    letter-spacing: 0.2vw;
    font-family: 'HarmonyOS Sans', Arial, sans-serif !important;
}

/* 特性卡片部分 */
.about-features {
    margin-top: 2vw;
}

.feature-card {
    background: linear-gradient(to right,
            rgba(217, 217, 217, .2) 0%,
            rgba(115, 115, 115, .2) 100%);
    border-radius: 5px;
    width: 27.76vw;
    height: 25.104vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.feature-card .about-title {
    margin-top: 1.25vw;
}

.feature-card .about-description {
    margin-top: 1.25vw;
}

/* 图标尺寸 */
.feature-card:nth-child(1) img {
    width: 6.736vw;
    height: 6.816vw;
}

.feature-card:nth-child(2) img {
    width: 4.897vw;
    height: 5.234vw;
}

.feature-card:nth-child(3) img {
    width: 5.859vw;
    height: 5.078vw;
}

/* 使命部分 */
.about-mission {
    margin-top: 2vw;
    width: 64.805vw;
    height: 22.135vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: url('../img/bg-mission.webp') no-repeat center;
    background-size: cover;
}

.mission-content {
    padding: 0 4.5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 25.104vw;
}

/* 愿景和联系我们部分 */
.about-vision-contact {
    width: 64.805vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
    margin-top: 2vw;
}

.vision {
    width: 42.5vw;
    height: 34.115vw;
    background: url('../img/bg-vision.webp') no-repeat center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact {
    width: 42.5vw;
    height: 34.115vw;
    background: linear-gradient(to right,
            rgba(217, 217, 217, .15) 0%,
            rgba(115, 115, 115, .1) 100%);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 3vw;
}

/* 联系表单 */
.contact form {
    width: 80%;
    margin-top: 2vw;
    position: relative;
    font-family: 'HarmonyOS Sans', Arial, sans-serif !important;
}

.contact input,
.contact textarea {
    width: 100%;
    background: rgba(158, 158, 158, 0.4);
    border: none;
    border-radius: 1.146vw;
    padding: 1vw 1.5vw;
    margin-bottom: 1vw;
    color: #FFFFFF;
    font-size: 1.25vw;
}

.contact input {
    border-radius: 2.5vw;
}

.contact input::placeholder,
.contact textarea::placeholder {
    font-size: 0.938vw;
    background: linear-gradient(to right,
            rgba(242, 227, 198, 1) 0%,
            rgba(175, 153, 134, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1;
    /* Firefox需要设置opacity为1 */
}

.contact input {
    height: 3.5vw;
}

.contact textarea {
    height: 12vw;
    resize: none;
}

.contact button {
    float: right;
    background: linear-gradient(to right, rgba(242, 227, 198, 1) 0%, rgba(175, 153, 134, 1) 100%);
    border: none;
    border-radius: 2.604vw;
    padding: 0.7vw 2vw;
    color: #FFFFFF;
    font-size: 0.938vw
    cursor: pointer;
    margin-top: 1vw;
    position: absolute;
    right: 1vw;
    bottom: 2.125vw;
}

.vision-content,
.contact-content {
    padding: 0 4.5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.vision-content .about-description {
    text-align: left;
    line-height: 3vw;
}