/* =======================================
   关于我们页面样式 - 独立CSS文件
   电脑+手机自适应 | SEO优化
======================================= */

/* 通用图片盒子 */
.img-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}
.img-box img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------
   关于我们模块
-------------------------- */
.about-section {
    margin: 30px 0;
    overflow: hidden;
}
.about-title {
    text-align: center;
    font-size: 26px;
    color: #333;
    margin: 0 0 8px 0;
}
.about-subtitle {
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
}
.about-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}
.about-content {
    flex: 1 1 350px;
    order: 2;
}
.about-content h3 {
    font-size: 24px;
    color: #0066cc;
    margin: 0 0 15px 0;
}
.about-content p {
    font-size: 16px;
    line-height: 2;
    color: #666;
    margin: 0;
}
.about-img {
    flex: 1 1 350px;
    order: 1;
}

/* --------------------------
   品质管控模块
-------------------------- */
.quality-section {
    margin: 50px 0;
    overflow: hidden;
}
.quality-title {
    text-align: center;
    font-size: 26px;
    color: #333;
    margin: 0 0 8px 0;
}
.quality-subtitle {
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
}
.quality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.quality-item {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}
.quality-info {
    padding: 15px;
    text-align: center;
}
.quality-info h4 {
    margin: 0 0 10px 0;
}
.quality-info p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin: 0;
}

/* 手机端：品质管控 2列 */
@media (max-width: 767px) {
    .quality-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------
   产品应用 / 研发 / 售后
-------------------------- */
.feature-section {
    margin: 50px 0;
    overflow: hidden;
}
.feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    margin-bottom: 50px;
}
.feature-content {
    flex: 1 1 350px;
    order: 2;
}
.feature-content h3 {
    font-size: 24px;
    color: #0066cc;
    margin: 0 0 15px 0;
}
.feature-content h3 span {
    color: #333;
}
.feature-content p {
    font-size: 16px;
    line-height: 2;
    color: #666;
    margin: 0;
}
.feature-img {
    flex: 1 1 350px;
    order: 1;
}

/* --------------------------
   联系我们模块
-------------------------- */
.contact-section {
    margin: 60px 0;
}
.contact-title {
    text-align: center;
    font-size: 32px;
    color: #222;
    margin: 0 0 8px 0;
}
.contact-subtitle {
    text-align: center;
    color: #999;
    font-size: 16px;
    margin: 0 0 40px 0;
}

/* 布局：电脑4个 / 手机1个 */
.contact-module {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 767px) {
    .contact-module {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* 卡片样式 */
.contact-item {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
}
.contact-icon {
    font-size: 42px;
    color: #0066cc;
    margin-bottom: 18px;
}
.contact-item h3 {
    font-size: 18px;
    color: #333;
    margin: 0 0 15px 0;
}
.contact-item p {
    font-size: 15px;
    color: #666;
    margin: 0;
    line-height: 1.7;
}