/* 引入 style.css 中的变量 */
@import url('detail.css');
@media (min-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: 856px;
    }

    .header-container {
        width: 1200px;
        margin: 0 auto;
        padding: 123px 0px 0px 150px;
    }

    .reasons-container{
        position: absolute;
        top: 420px;
        /*left: 730px;*/
        width: 100%;
        text-align: center;
    }

    .reasons-title{
        font-size: 28px;
    }


    .reasons-list{
        position: absolute;
        display: flex;
        bottom: 60px;
        max-width: 1180px;
        left: calc(50vw - 590px);
        height: 274px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .reason-item{
        position: relative;
        padding: 60px 26px 26px 26px;
    }

    .reason-item-title{
        color: #181818;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .reason-item-description{
        color: #495770;
        font-size: 14px;
    }

    .reason-item.hover{
        background: url("../images/about/hover-bg.png") no-repeat center bottom;
        background-size: 100% 232px;
    }

    .reason-item.hover .reason-item-title{
        color: var(--white);
    }
    .reason-item.hover .reason-item-description{
        color: var(--white);
    }

    .reason-item:nth-child(1).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 15px;
        background: url("../images/about/1.png") no-repeat center/cover;
        width: 84px;
        height: 84px;
    }

    .reason-item:nth-child(2).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 15px;
        background: url("../images/about/2.png") no-repeat center/cover;
        width: 84px;
        height: 84px;
    }

    .reason-item:nth-child(3).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 15px;
        background: url("../images/about/3.png") no-repeat center/cover;
        width: 84px;
        height: 84px;
    }

    .reason-item:nth-child(4).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 15px;
        background: url("../images/about/4.png") no-repeat center/cover;
        width: 84px;
        height: 84px;
    }

    .reason-item:nth-child(5).hover::after{
        content: "";
        position: absolute;
        top: 10px;
        right: 15px;
        background: url("../images/about/5.png") no-repeat center/cover;
        width: 84px;
        height: 84px;
    }

    .main{
        margin-top: 80px;
        background: url('../images/about/bg.png') no-repeat center/cover;
    }

    /* 公司简介 */
    .company-box{
        padding: 10px 20px 30px 20px;
    }

    .company-box h2 {
        text-align: center;
        margin-bottom: 5px;
    }

    .company-desc {
        text-align: center;
        color: var(--gray-400);
        margin-bottom: 30px;
    }
    .company-info {
        width: 1200px;;
        display: flex;
        align-items: stretch;
        justify-content: center;
        margin: 0 auto;
    }
    .info-content {
        flex: 1;
        padding: 43px 50px;
        max-width: 50%;
        background: url("../images/about/right-bg.png") no-repeat center/cover;
    }
    .info-content h4 {
        position: relative;
        margin-bottom: 20px;
    }
    .info-content h4::after {
        content: '';
        display: block;
        width: 64px;
        height: 4px;
        background: var(--primary);
        margin-top: 10px;
    }
    .info-content p{
        margin-top: 10px;
        color: #333333;
        font-size: 12px;
        text-indent: 2em;
    }

    .info-image {
        flex: 1;
    }

    .info-image img{
        width: 100%;
        height: 100%;
    }

    .contact-info{
        margin-top: 20px;
    }

    .contact-item{
        display: flex;
    }
    .contact-label{
        position: relative;
        white-space: nowrap;
        margin-right: 10px;
    }

    /* 使用 CSS 变量定义图标样式 */
    .contact-label::after {
        position: absolute;
        content: " ";
        width: 15px;
        height: 15px;
        top: 5px;
        left: -20px;
        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;
    }
    .cert-box{
        position:relative;
        width: 1200px;;
        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;}
}
