/* 引入 style.css 中的变量 */
@import url('style.css');
@import url('nav-mobile.css');
@import url('footer-mobile.css');

@media (max-width: 767px) {
    /* Banner */
    .header-banner {
        position: relative;
        background: url('../images/about/header-bg.png') no-repeat center/cover;
        /*border-bottom: 1px solid var(--gray-300);*/
        height: auto; /* 让高度根据内容自动调整 */
    }

    .header-container {
        width: 90%; /* 使用相对宽度，适应不同手机屏幕 */
        margin: 0 auto;
        padding: 50px 0; /* 减小 padding 值 */
    }

    .reasons-container{
        position: relative; /* 改为相对定位，避免布局混乱 */
        top: 0;
        width: 100%;
        text-align: center;
    }

    .reasons-title{
        font-size: 20px; /* 减小字体大小 */
    }

    .reasons-list{
        position: relative;
        display: flex;
        flex-wrap: wrap; /* 让列表项在小屏幕上换行 */
        justify-content: center;
        margin-top: 20px;
        max-width: 100%;
        height: auto;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .reason-item{
        position: relative;
        padding: 50px 10px 10px 10px; /* 减小 padding 值 */
        width: 45%; /* 调整每个列表项的宽度，使其在一行显示两个 */
        margin-bottom: 20px;
    }

    .reason-item-title{
        color: #181818;
        font-size: 16px; /* 减小字体大小 */
        margin-bottom: 5px;
    }

    .reason-item-description{
        color: #495770;
        font-size: 12px; /* 减小字体大小 */
    }

    .reason-item.hover{
        background: url("../images/about/hover-bg.png") no-repeat center bottom;
        background-size: 100% 150px; /* 调整背景图片大小 */
    }

    .reason-item.hover .reason-item-title{
        color: var(--white) !important;
    }
    .reason-item.hover .reason-item-description{
        color: var(--white) !important;;
    }

    .reason-item:nth-child(1).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 10px;
        background: url("../images/about/1.png") no-repeat center/cover;
        width: 60px;
        height: 60px; /* 减小图片尺寸 */
    }

    .reason-item:nth-child(2).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 10px;
        background: url("../images/about/2.png") no-repeat center/cover;
        width: 60px;
        height: 60px; /* 减小图片尺寸 */
    }

    .reason-item:nth-child(3).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 10px;
        background: url("../images/about/3.png") no-repeat center/cover;
        width: 60px;
        height: 60px; /* 减小图片尺寸 */
    }

    .reason-item:nth-child(4).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 10px;
        background: url("../images/about/4.png") no-repeat center/cover;
        width: 60px;
        height: 60px; /* 减小图片尺寸 */
    }

    .reason-item:nth-child(5).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 10px;
        background: url("../images/about/5.png") no-repeat center/cover;
        width: 60px;
        height: 60px; /* 减小图片尺寸 */
    }

    .main{
        margin-top: 40px;
        background: url('../images/about/bg.png') no-repeat center/cover;
        background-size: cover; /* 调整背景图片尺寸 */
    }

    /* 公司简介 */
    .company-box{
        padding: 10px; /* 减小 padding 值 */
    }

    .company-box h2 {
        text-align: center;
        margin-bottom: 5px;
        font-size: 20px; /* 减小字体大小 */
    }

    .company-desc {
        text-align: center;
        color: var(--gray-400);
        margin-bottom: 20px;
        font-size: 14px; /* 减小字体大小 */
    }
    .company-info {
        width: 90%; /* 使用相对宽度 */
        display: flex;
        flex-wrap: wrap; /* 让内容在小屏幕上换行 */
        align-items: stretch;
        justify-content: center;
        margin: 0 auto;
    }
    .info-content {
        flex: 1 0 100%; /* 让内容占满整行 */
        padding: 20px; /* 减小 padding 值 */
        background: url("../images/about/right-bg.png") no-repeat center/cover;
        background-size: cover; /* 调整背景图片尺寸 */
    }
    .info-content h4 {
        position: relative;
        margin-bottom: 10px;
        font-size: 16px; /* 减小字体大小 */
    }
    .info-content h4::after {
        content: '';
        display: block;
        width: 40px;
        height: 3px; /* 减小线条高度 */
        background: var(--primary);
        margin-top: 5px;
    }
    .info-content p{
        margin-top: 10px;
        color: #333333;
        font-size: 12px;
        text-indent: 2em;
    }

    .info-image {
        flex: 1 0 100%; /* 让图片占满整行 */
        margin-top: 20px;
    }

    .info-image img{
        width: 100%;
        height: auto; /* 让图片高度根据宽度自动调整 */
    }

    .contact-info{
        margin-top: 10px;
    }

    .contact-item{
        display: flex;
        margin-bottom: 10px;
    }
    .contact-label{
        position: relative;
        white-space: nowrap;
        margin-right: 10px;
        color: #181818;
        font-size: 12px; /* 减小字体大小 */
        padding-left: 12px;
    }

    /* 使用 CSS 变量定义图标样式 */
    .contact-label::after {
        position: absolute;
        content: " ";
        width: 12px;
        height: 12px; /* 减小图标尺寸 */
        top: 3px;
        left: 0px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    /* 为每个 .contact-label 应用不同的背景图片 */
    .contact-item:nth-child(1) .contact-label::after {
        background-image: url("../images/about/address.png");
    }

    .contact-item:nth-child(2) .contact-label::after {
        background-image: url("../images/about/postal-code.png");
    }

    .contact-item:nth-child(3) .contact-label::after {
        background-image: url("../images/about/phone.png");
    }
    .contact-value{
        color: #495770;
        white-space: nowrap;
        font-size: 12px; /* 减小字体大小 */
    }
    .cert-box{
        position:relative;
        width: 100%;
        height: 338px;
        background: url("../images/about/cert/bg.png") no-repeat center/cover;
        margin: 0 auto;
        text-align: center;
    }
    .cert-data{
        position:relative;margin:0 auto;top:0px;left:0px;width:390px;height:338px;overflow:hidden;visibility:hidden;;
    }
    .cert-slides{
        cursor:default;position:relative;top:31px;left:0px;width:390px;height:276px;overflow:hidden;
    }
    .cert-slides img{
        width: 390px;
        height: 276px;
    }

    .navigator{
        display: flex;
        position:absolute;
        right: 50%;
        bottom: 12px;
    }

    .navigator .i {position:absolute;cursor:pointer;width:32px;height:6px;background: var(--white)}
    .navigator .i .b {fill:none;stroke:#fff;stroke-width:2000;stroke-miterlimit:10;stroke-opacity:0.4;}
    .navigator .i:hover {stroke-opacity:.7;background: #007AFF;}
    .navigator .iav  {stroke-opacity: 1; background: #007AFF;}
    .navigator .i.idn {opacity:.3;}
}