.cover_bd {
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
    background: url(../images/AB2.png) no-repeat;
    background-size: cover;
}

.cover_content {
    justify-self: center;
    align-self: center;
}

@media (max-width: 991px) {

    .cover {
        height: 280px;
    }
}

@media (max-width: 768px) {

    .cover {
        height: 210px;
    }

    .cover_bd h1 {
        text-align: center;
        font-size: 56px;
    }

}

@media (max-width: 576px) {
    .cover {
        height: 210px;
    }

    .cover_bd h1 {
        text-align: center;
        font-size: 30px;
    }
}


/* project */

.project{
    background: url(../images/56.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0px;
}

.project_bd {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 36px;
}

.project_page_bd {
    display: grid;
    grid-template-columns: 1fr;
}

.project .project_content_bd_1::before {
    background-image: url(../images/C1.jpg);
}


.project .project_content_bd_2::before {
    background-image: url(../images/c7.jpg);
}


.project .project_content_bd_3::before {
    background-image: url(../images/P1.jpg);
}


.project .project_content_bd_4::before {
    background-image: url(../images/C3.jpg);
}

.project .project_content_bd_5::before {
    background-image: url(../images/p2.jpg);
}


.project .project_content_bd_6::before {
    background-image: url(../images/p3.jpg);
}

.project .project_content_bd_7::before {
    background-image: url(../images/c10.jpg);
}

.project .project_content_bd_8::before {
    background-image: url(../images/c11.jpg);
}

.project .project_content_bd_9::before {
    background-image: url(../images/C2.jpg);
}

.project .project_content_bd_10::before {
    background-image: url(../images/c13.jpg);
}


.project .project_content_bd_11::before {
    background-image: url(../images/p4.jpg);
}

.project .project_content_bd_12::before {
    background-image: url(../images/c14.jpg);
}


.project .project_content_bd_13::before {
    background-image: url(../images/p5.jpg);
}


.project .project_content_bd_14::before {
    background-image: url(../images/c15.jpg);
}

.project .project_content_bd_15::before {
    background-image: url(../images/c16.jpg);
}


.project .project_content_bd_16::before {
    background-image: url(../images/c17.jpg);
}

.project .project_content_bd_17::before {
    background-image: url(../images/c18.jpg);
}

.project .project_content_bd_18::before {
    background-image: url(../images/c19.jpg);
}

.project .project_content_bd_19::before {
    background-image: url(../images/c20.jpg);
}


.project .project_content_bd_20::before {
    background-image: url(../images/c21.jpg);
}


.project .project_content_bd_21::before {
    background-image: url(../images/c22.jpg);
}


.project .project_content_bd_22::before {
    background-image: url(../images/c23.jpg);
}

.project .project_content_bd_23::before {
    background-image: url(../images/c24.jpg);
}


.project .project_content_bd_24::before {
    background-image: url(../images/c25.jpg);
}

.project .project_content_bd_25::before {
    background-image: url(../images/c26.jpg);
}

.project .project_content_bd_26::before {
    background-image: url(../images/c27.jpg);
}

.project .project_content_bd_27::before {
    background-image: url(../images/c28.jpg);
}


.project .project_content_bd_1::before,
.project .project_content_bd_2::before,
.project .project_content_bd_3::before,
.project .project_content_bd_4::before,
.project .project_content_bd_5::before,
.project .project_content_bd_6::before,
.project .project_content_bd_7::before,
.project .project_content_bd_8::before,
.project .project_content_bd_9::before,
.project .project_content_bd_10::before,
.project .project_content_bd_11::before,
.project .project_content_bd_12::before,
.project .project_content_bd_13::before,
.project .project_content_bd_14::before,
.project .project_content_bd_15::before,
.project .project_content_bd_16::before,
.project .project_content_bd_17::before,
.project .project_content_bd_18::before,
.project .project_content_bd_19::before,
.project .project_content_bd_20::before,
.project .project_content_bd_21::before,
.project .project_content_bd_22::before,
.project .project_content_bd_23::before,
.project .project_content_bd_24::before,
.project .project_content_bd_25::before,
.project .project_content_bd_26::before,
.project .project_content_bd_27::before
{    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform-origin: center;
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}


.project .project_content_bd_1,
.project .project_content_bd_2,
.project .project_content_bd_3,
.project .project_content_bd_4,
.project .project_content_bd_5,
.project .project_content_bd_6,
.project .project_content_bd_7,
.project .project_content_bd_8,
.project .project_content_bd_9,
.project .project_content_bd_10,
.project .project_content_bd_11,
.project .project_content_bd_12,
.project .project_content_bd_13,
.project .project_content_bd_14,
.project .project_content_bd_15,
.project .project_content_bd_16,
.project .project_content_bd_17,
.project .project_content_bd_18,
.project .project_content_bd_19,
.project .project_content_bd_20,
.project .project_content_bd_21,
.project .project_content_bd_22,
.project .project_content_bd_23,
.project .project_content_bd_24,
.project .project_content_bd_25,
.project .project_content_bd_26,
.project .project_content_bd_27
{
    border-radius: 10px;
    position: relative;
    height: 280px;
    list-style: none;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.project .project_content_bd_1:hover::before,
.project .project_content_bd_2:hover::before,
.project .project_content_bd_3:hover::before,
.project .project_content_bd_4:hover::before,
.project .project_content_bd_5:hover::before,
.project .project_content_bd_6:hover::before,
.project .project_content_bd_7:hover::before,
.project .project_content_bd_8:hover::before,
.project .project_content_bd_9:hover::before,
.project .project_content_bd_10:hover::before,
.project .project_content_bd_11:hover::before,
.project .project_content_bd_12:hover::before,
.project .project_content_bd_13:hover::before,
.project .project_content_bd_14:hover::before,
.project .project_content_bd_15:hover::before,
.project .project_content_bd_16:hover::before,
.project .project_content_bd_17:hover::before,
.project .project_content_bd_18:hover::before,
.project .project_content_bd_19:hover::before,
.project .project_content_bd_20:hover::before,
.project .project_content_bd_21:hover::before,
.project .project_content_bd_22:hover::before,
.project .project_content_bd_23:hover::before,
.project .project_content_bd_24:hover::before,
.project .project_content_bd_25:hover::before,
.project .project_content_bd_26:hover::before,
.project .project_content_bd_27:hover::before
{
    transform: scale(1.2);
    filter: brightness(30%);
}

.project .project_content {
    position: absolute;
    top: 70%;
    left: 60%;
    transform: translate(-50%, -50%);
    color: transparent;
    text-align: center;
    transition: color 0.2s ease-in-out;
    width: 100%;
}

.project .project_content h2 {
    margin: 15px 0px;
    text-align: start;
}

.project .project_content a {
    font-size: 24px;
    color: transparent;
    transition: color 0.3s ease-in-out;
}

.project .project_content p {
    font-size: 12px;
    text-align: start;
}

/* .project_content_bd = UL  .project_content = li 这就是鼠标碰到父亲盒子hover儿子的方法*/
.project .project_content_bd_1:hover .project_content,
.project .project_content_bd_2:hover .project_content,
.project .project_content_bd_3:hover .project_content,
.project .project_content_bd_4:hover .project_content,
.project .project_content_bd_5:hover .project_content,
.project .project_content_bd_6:hover .project_content,
.project .project_content_bd_7:hover .project_content,
.project .project_content_bd_8:hover .project_content,
.project .project_content_bd_9:hover .project_content,
.project .project_content_bd_10:hover .project_content,
.project .project_content_bd_11:hover .project_content,
.project .project_content_bd_12:hover .project_content,
.project .project_content_bd_13:hover .project_content,
.project .project_content_bd_14:hover .project_content,
.project .project_content_bd_15:hover .project_content,
.project .project_content_bd_16:hover .project_content,
.project .project_content_bd_17:hover .project_content,
.project .project_content_bd_18:hover .project_content,
.project .project_content_bd_19:hover .project_content,
.project .project_content_bd_20:hover .project_content,
.project .project_content_bd_21:hover .project_content,
.project .project_content_bd_22:hover .project_content,
.project .project_content_bd_23:hover .project_content,
.project .project_content_bd_24:hover .project_content,
.project .project_content_bd_25:hover .project_content,
.project .project_content_bd_26:hover .project_content,
.project .project_content_bd_27:hover .project_content
 {
    color: #fff;
    /* 修改为所需的文字颜色 */
}

.project .project_content_bd_1:hover .project_content a,
.project .project_content_bd_2:hover .project_content a,
.project .project_content_bd_3:hover .project_content a,
.project .project_content_bd_4:hover .project_content a,
.project .project_content_bd_5:hover .project_content a,
.project .project_content_bd_6:hover .project_content a,
.project .project_content_bd_7:hover .project_content a,
.project .project_content_bd_8:hover .project_content a,
.project .project_content_bd_9:hover .project_content a,
.project .project_content_bd_10:hover .project_content a,
.project .project_content_bd_11:hover .project_content a,
.project .project_content_bd_12:hover .project_content a,
.project .project_content_bd_13:hover .project_content a,
.project .project_content_bd_14:hover .project_content a,
.project .project_content_bd_15:hover .project_content a,
.project .project_content_bd_16:hover .project_content a,
.project .project_content_bd_17:hover .project_content a,
.project .project_content_bd_18:hover .project_content a,
.project .project_content_bd_19:hover .project_content a,
.project .project_content_bd_20:hover .project_content a,
.project .project_content_bd_21:hover .project_content a,
.project .project_content_bd_22:hover .project_content a,
.project .project_content_bd_23:hover .project_content a,
.project .project_content_bd_24:hover .project_content a,
.project .project_content_bd_25:hover .project_content a,
.project .project_content_bd_26:hover .project_content a,
.project .project_content_bd_27:hover .project_content a
{
    color: #fff;
    /* 修改为所需的文字颜色 */
}

.project .project_content_bd_1:hover .project_content a:hover,
.project .project_content_bd_2:hover .project_content a:hover,
.project .project_content_bd_3:hover .project_content a:hover,
.project .project_content_bd_4:hover .project_content a:hover,
.project .project_content_bd_5:hover .project_content a:hover,
.project .project_content_bd_6:hover .project_content a:hover,
.project .project_content_bd_7:hover .project_content a:hover,
.project .project_content_bd_8:hover .project_content a:hover,
.project .project_content_bd_9:hover .project_content a:hover,
.project .project_content_bd_10:hover .project_content a:hover,
.project .project_content_bd_11:hover .project_content a:hover,
.project .project_content_bd_12:hover .project_content a:hover,
.project .project_content_bd_13:hover .project_content a:hover,
.project .project_content_bd_14:hover .project_content a:hover,
.project .project_content_bd_15:hover .project_content a:hover,
.project .project_content_bd_16:hover .project_content a:hover,
.project .project_content_bd_17:hover .project_content a:hover,
.project .project_content_bd_18:hover .project_content a:hover,
.project .project_content_bd_19:hover .project_content a:hover,
.project .project_content_bd_20:hover .project_content a:hover,
.project .project_content_bd_21:hover .project_content a:hover,
.project .project_content_bd_22:hover .project_content a:hover,
.project .project_content_bd_23:hover .project_content a:hover,
.project .project_content_bd_24:hover .project_content a:hover,
.project .project_content_bd_25:hover .project_content a:hover,
.project .project_content_bd_26:hover .project_content a:hover,
.project .project_content_bd_27:hover .project_content a:hover
 {
        color: #daa14c;
    /* 修改为所需的文字颜色 */
}

@media (max-width: 1400px) {
    .project_bd {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 30px;
        padding: 0px 0px;
        margin-top: 20px;
        margin-bottom: 115px;
    }

    .project .w {
        width: 95%;
    }
}

@media (max-width: 1100px) {

    .project{
        background: url(../images/56.png);
        background-repeat: no-repeat;
        background-size: cover;
        padding: 50px 0px;
    }

    .project_bd {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 30px;
        padding: 0px 0px;
        margin-top: 20px;
        margin-bottom: 115px;
    }

    .project .project_content_bd_1,
    .project .project_content_bd_2,
    .project .project_content_bd_3,
    .project .project_content_bd_4,
    .project .project_content_bd_5,
    .project .project_content_bd_6,
    .project .project_content_bd_7,
    .project .project_content_bd_8,
    .project .project_content_bd_9,  
    .project .project_content_bd_10,
    .project .project_content_bd_11,
    .project .project_content_bd_12,
    .project .project_content_bd_13,
    .project .project_content_bd_14,
    .project .project_content_bd_15,
    .project .project_content_bd_16,
    .project .project_content_bd_17,
    .project .project_content_bd_18,
    .project .project_content_bd_19,
    .project .project_content_bd_20,
    .project .project_content_bd_21,
    .project .project_content_bd_22,
    .project .project_content_bd_23,
    .project .project_content_bd_24,
    .project .project_content_bd_25,
    .project .project_content_bd_26,
    .project .project_content_bd_27 {
        position: relative;
        max-width: 790px;
        height: 350px;
        list-style: none;
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }

    .project .project_content_bd_9,
    .project .project_content_bd_18,
    .project .project_content_bd_27{
        display: none;
    }
}

@media (max-width: 768px) {
    .project_bd {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 18px;
        padding: 0px 0px;
        margin-top: 20px;
        margin-bottom: 115px;
    }

    .project .project_content_bd_1,
    .project .project_content_bd_2,
    .project .project_content_bd_3,
    .project .project_content_bd_4,
    .project .project_content_bd_5,
    .project .project_content_bd_6,
    .project .project_content_bd_7,
    .project .project_content_bd_8,
    .project .project_content_bd_9,
    .project .project_content_bd_10,
    .project .project_content_bd_11,
    .project .project_content_bd_12,
    .project .project_content_bd_13,
    .project .project_content_bd_14,
    .project .project_content_bd_15,
    .project .project_content_bd_16,
    .project .project_content_bd_17,
    .project .project_content_bd_18,
    .project .project_content_bd_19,
    .project .project_content_bd_20,
    .project .project_content_bd_21,
    .project .project_content_bd_22,
    .project .project_content_bd_23,
    .project .project_content_bd_24,
    .project .project_content_bd_25,
    .project .project_content_bd_26,
    .project .project_content_bd_27{
        position: relative;
        max-width: 790px;
        height: 350px;
        list-style: none;
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }

    .project_tittle h1 {
        font-size: 42px;
        text-align: center;
        margin-bottom: 30px;
    }
}


@media (max-width: 576px) {

    .project{
        background: url(../images/56.png);
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px 0px;
    }

    .project_bd {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 14px;
        padding: 0px 0px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .project .project_content_bd_1,
    .project .project_content_bd_2,
    .project .project_content_bd_3,
    .project .project_content_bd_4,
    .project .project_content_bd_5,
    .project .project_content_bd_6,
    .project .project_content_bd_7,
    .project .project_content_bd_8,
    .project .project_content_bd_9,    
    .project .project_content_bd_10,
    .project .project_content_bd_11,
    .project .project_content_bd_12,
    .project .project_content_bd_13,
    .project .project_content_bd_14,
    .project .project_content_bd_15,
    .project .project_content_bd_16,
    .project .project_content_bd_17,
    .project .project_content_bd_18,
    .project .project_content_bd_19,
    .project .project_content_bd_20,
    .project .project_content_bd_21,
    .project .project_content_bd_22,
    .project .project_content_bd_23,
    .project .project_content_bd_24,
    .project .project_content_bd_25,
    .project .project_content_bd_26,
    .project .project_content_bd_27
      {
        position: relative;
        max-width: 576px;
        height: 350px;
        list-style: none;
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }

    .project_tittle_p1 {
        font-size: 12px;
        letter-spacing: 4px;
        color: #daa14c;
        font-weight: 500;
        text-align: center;
        margin-bottom: 20px;
    }

    .project_tittle h1 {
        font-size: 30px;
        text-align: center;
        margin-bottom: 30px;
    }

    .project_tittle_p2 {
        font-size: 12px;
        max-width: 650px;
        text-align: center;
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
    }
}






/* pagination css */
.pagination_container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #000;
  }
  
  .page {
    display: none;
  }
  
  .page.active {
    display: block;
  }
  
  .pagination {
    margin: 40px 0px;
    justify-self: center;
  }
  
  .pagination button {
    padding: 10px 15px;
    background: #fff;
    color: #333;
    margin-right: 5px;
    border-radius: 5px;
    border: 1px solid #23262d;
    transition: all 0.3s;
  }

  .pagination button:hover{
    background: #333;
    color: #fff;
  }
  
  .pagination button.active {
    background: #333;
    color: #fff;
  }

  .my-element0 {
    opacity: 0;
    animation: fadeInUp 1.05s 0s forwards;
  }

  .my-element02 {
    opacity: 0;
    animation: fadeInUp 1.05s 0.2s forwards;
  }

  .my-element04 {
    opacity: 0;
    animation: fadeInUp 1.05s 0.4s forwards;
  }

  .my-element06 {
    opacity: 0;
    animation: fadeInUp 1.05s 0.6s forwards;
  }

  .my-element08 {
    opacity: 0;
    animation: fadeInUp 1.05s 0.8s forwards;
  }

  .my-element10 {
    opacity: 0;
    animation: fadeInUp 1.05s 1s forwards;
  }

  .my-element12 {
    opacity: 0;
    animation: fadeInUp 1.05s 1.2s forwards;
  }

  .my-element14 {
    opacity: 0;
    animation: fadeInUp 1.05s 1.4s forwards;
  }

  .my-element16 {
    opacity: 0;
    animation: fadeInUp 1.05s 1.6s forwards;
  }

  .my-element18 {
    opacity: 0;
    animation: fadeInUp 1.05s 1.8s forwards;
  }


  
  
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }