/* 引入 style.css 中的变量 */
@import url('style.css');
@import url('nav.css');
@import url('footer.css');
@media (min-width: 767px) {
    /* Banner */
    .header-banner {
        position: relative;
        background: url('../images/header-bg.png') no-repeat center/cover;
        height: 480px;
        /*border-bottom: 1px solid var(--gray-300);*/
    }

    .header-container {
        width: 1200px;;
        margin: 0 auto;
        padding: 150px 0px 0px 90px;
    }

    .header-container h1{
        font-size: 40px;
        margin-bottom: 5px;
    }

    .header-container a:active{
        background-color: var(--primary-dark);
    }

    .main{
        background: url('../images/company-bg.png') no-repeat center/cover;
    }

    /*产品推荐*/
    .product-recommend{
        margin-top: 60px;
        text-align: center;
        /*border-bottom: 1px solid var(--gray-300);*/
    }

    .product-recommend p{
        margin-bottom: 30px;
    }

    /* 容器 */
    .product-container {
        width: 1200px;;
        margin: 0 auto;
    }

    .product-container h2{
        color: #181818;
        padding: 15px 0 5px 0;
    }

    .product-container p{
       color: #495770;
        padding: 0 0 15px 0;
    }

    /* 产品推荐网格布局 */
    .product-grid {
        display: grid;
        grid-template-columns: 220px 1fr;
        width: 1200px;;
        margin: 0 auto;
        align-items: stretch; /* 左右等高 */
        background: url("../images/product-bg.png") no-repeat center/cover;
    }

    .left-column {
        display: grid;
        gap: 1px;
        background: url("../images/pro-lb-bg.png") no-repeat center/cover;
    }

    .bottom-categories {
        display: grid;
        gap: 1px;
    }

    .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 158px;
        transition: transform 0.3s ease;
        padding: 10px;
    }

    .category-item h4 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .category-item a {
        font-size: 14px;
        color: var(--black);
        text-decoration: none;
    }

    .category-item.hover {
        background: url("../images/vat.png") no-repeat center/cover;
        color: var(--primary);
        /*transform: translateX(5px); !* 改为水平移动 *!*/
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .category-item.hover a {
        color: var(--primary);
    }

    .right-products {
        display: grid;
        grid-template-rows: repeat(3, 1fr); /* 固定3行高度均分 */
        grid-template-columns: repeat(3, 1fr); /* 3列布局 */
        gap: 1px;
    }

    .right-product {
        background: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0  30px;
        gap: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
    }

    .right-product:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .product-title {
        color: #181818;
        font-size: 16px;
    }

    .product-desc {
        font-size: 14px;
        color: #495770;
    }

    .tag-group {
        display: flex;
        gap: 8px;
        flex-wrap: wrap; /* 允许子元素换行 */
    }

    .tag {
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        color: #495770;
        white-space: nowrap; /* 禁止文本换行 */
    }

    /* 行业动态 */
    .dynamic-section {
        padding: 60px 0;
        text-align: center;
        /*border-bottom: 1px solid var(--gray-300);*/
    }

    .dynamic-section h2 {
        font-size: 24px;
        margin: 10px;
        margin-bottom: 5px;
    }

    .dynamic-section p {
        color: var(--gray-400);
        margin-bottom: 30px;
    }

    /* 容器 */
    .dynamic-container {
        width: 1200px;;
        margin: 0 auto;
    }

    .dynamic-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .dynamic-item {
        position: relative;
        color: var(--white);
        height: 180px;
        padding: 20px;
        font-size: 12px;
        border-radius: 4px;
        overflow: hidden;
    }

    .dynamic-item:nth-child(1){
        background: url("../images/industry/1.png") no-repeat center/cover;
    }
    .dynamic-item:nth-child(2){
        background: url("../images/industry/2.png") no-repeat center/cover;
    }
    .dynamic-item:nth-child(3){
        background: url("../images/industry/3.png") no-repeat center/cover;
    }
    .dynamic-item:nth-child(4){
        background: url("../images/industry/4.png") no-repeat center/cover;
    }

    .dynamic-item h4 {
        font-size: 18px;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
    }

    .dynamic-item p {
        font-size: 14px;
        color: var(--white);
        line-height: 1.6;
        margin-bottom: 20px;
        position: relative;
        z-index: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }

    .dynamic-item div {
        position: absolute;
        left: 20px;
        bottom: 25px;
    }

    .dynamic-item a {
        display: inline-block;
        padding: 4px 25px;
        text-decoration: none;
        border-radius: 4px;
        position: relative;
        z-index: 1;
        transition: background 0.3s;
        background: var(--white);
        color: var(--primary);
        border: 1px solid var(--gray-200);
    }

    .dynamic-item a:hover {
        border:1px solid var(--primary);
    }

    /* 公司简介 */
    .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/picture.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%;
    }

    .btn-try {
        display: inline-block;
        background: var(--primary);
        color: var(--white);
        text-decoration: none;
        margin-top: 36px;
        width: 172px;
        height: 38px;
        text-align: center;
        line-height: 38px;
    }

    .btn-try:hover{
        background-color: var(--primary-dark);
    }
}