body {
      font: 16px / 1.6 "微软雅黑", Arial, sans-serif;
      background-color: #d9d9d9;
    }
    .row{
      margin: 0 !important;
    }
    .col-12 {
      width: 100%;
    }

    .col-3 {
      width: 25%;
    }
    .pagination {
      display: inline-block;
    }
    .breadcrumb{
      background-color: unset !important;
      padding: .75rem 0 !important;
      margin:  1rem 0 !important;
    }
    .breadcrumb-item+.breadcrumb-item::before {
      content:unset !important;
    }
    .pages{
      margin: 0 auto;
    }
    .pages .page-item .page-link {
      color:#426e72;
    }
    .pages .page-item.active .page-link {
      background-color: #426e72;
      border-color: #426e72;
    }
    .hide{
      display: none !important;
    }
    .header {
      width: 100% !important;
      height: 150px;
      position: fixed;
      top: 0;
      z-index: 999;
      background: rgba(0, 0, 0, .7);
      box-shadow: 0 6px 15px rgba(98, 98, 98, .06);
      transition: all .3s;
      margin: 0 !important;
      display: block !important;
    }

    .scrollup {
      height: 50px !important;
    }

    .scrollup .nav {
      margin: 0 auto !important;
    }

    .scrollup .nav .logo {
      width: 50px !important;
      top: 0 !important;
    }

    .scrollup .nav .logo img {
      width: 50px !important;
    }

    .scrollup .language {
      display: none;
    }

    .header .nav {
      width: fit-content;
      margin: 100px auto 0 auto;
    }

    .header .nav .nav-item {
      height: 50px;
      width: 8%;
      line-height: 50px;
      text-align: center;
      display: inline-block;
      position: relative;
      min-width: 155px;
    }

    .header .nav .nav-item a {
      display: block;
      color: #fff;
      font-weight: bolder;
      font-size: 19px;
      padding: 0 10px;
    }

    .header .nav .nav-item .hide {
      display: none !important;
    }

    .header .nav .nav-item .dropdown-menu {
      background-color: unset;
      border: unset;
      overflow: hidden;
      display: none;
      top: 50px;
      z-index: 100;
      padding-bottom: 10px;
      padding-top: 10px;
      height: 40px;
      position: absolute;
    }

    .dropdown-item:focus,
    .dropdown-item {
      height: 20px;
      line-height: 20px;
      width: 80px;
      color: #fff;
      font-size: 14px;
      overflow: hidden;
    }

    .nav .nav-item:hover .dropdown-menu {
      display: flex;
      margin: unset;
      transform: translateX(-25%);
    }

    .dropdown-item:focus,
    .dropdown-item:hover {
      background-color: unset !important;
      color: gold !important
    }

    .header .nav .nav-item .dropdown-menu a:before {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: #fff;
      width: 1px;
      height: 14px;
    }

    .header .nav .nav-item .dropdown-menu a:last-child:before {
      content: unset;
    }

    .header .nav .nav-item .dropdown-menu .dropdown-item {
      height: 20px;
      line-height: 20px;
      width: 80px;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      overflow: hidden;
      text-align: center;
      display: inline-block;
      position: relative;
    }

    .header .nav-bg {
      position: absolute;
      display: none;
      left: 0;
      right: 0;
      height: 40px;
      top: 50px;
      z-index: 1;
      background-color: rgba(0, 0, 0, .5);
    }

    .header>.col-12>.active {
      display: block !important;
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
    }

    .header .nav .logo {
      top: -75px;
      position: relative;
      width: 195px;
      height: auto;
    }

    .header .nav .logo img {
      width: 100%;
    }

    .header .language {
      position: fixed;
      right: 5%;
      top: 30px;
      height: 22px;
      padding: 0 10px;
      line-height: 20px;
      border-radius: 5px;
      z-index: 100;
      border: 1px solid #fff;
    }

    .header .language a {
      color: #fff;
      display: inline-block;
      margin: auto 5px;
      text-decoration: unset;
    }

    .header .language .verticalLine {
      background-color: #fff;
      width: 1px;
      height: 12px;
      display: inline-block;
    }

    .mobile .logo {
      display: inline-flex;
    }

    .mobile .logo img {
      max-height: 150px;
    }

    .mobile .logo h2 {
      color: #fff;
      margin: auto 0;
      font-size: 64px;
      font-weight: 600;
      top: 40px;
      position: absolute;
      left: 220px;
    }

    .mobile .menu .navbar-toggler {
      width: 100%;
      height: 130px;
    }

    .mobile .menu .navbar-toggler-icon {
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

    .mobile .menu .navbar .navbar-collapse {
      background-color: rgba(0, 0, 0, .7);
      width: fit-content;
      padding: 0 40px;
      right: 0px;
      position: absolute;
      top: 150px;
      width: 260px;
    }

    #bs-example-navbar-collapse-1>ul>li.nav-item>a {
      font-size: 2em;
      color: #fff;
      width: 120%;
    }

    .mobile .menu .navbar .navbar-collapse .dropdown-menu {
      background-color: rgba(0, 0, 0, .7);
    }

    .mobile .menu .navbar .navbar-collapse .dropdown-menu .dropdown-item {
      height: 2em;
      line-height: 2em;
      color: #fff;
      font-size: 2em;
    }

    .carousel {
      width: 100%;
    }

    .carousel .carousel-inner {
      width: 100%;
    }

    .carousel .carousel-inner .carousel-item {
      width: 100%;
    }

    .carousel .carousel-inner .carousel-item img {
      width: 100%;
    }

    .recommendableProjects {
      background-color: #aab2b2;
      /*background: linear-gradient(to right ,red 10%,#aab2b2 30%);*/
      height: 650px;
    }

    .recommendableProjects .left {
      background: #426e72 url(../image/bg6.jpg) no-repeat left center;
      height: 650px;
      padding-right: 100px;
    }

    .recommendableProjects .left p {
      font-family: 楷体;
      border-right: 1px solid #fff;
      width: 62px;
      font-weight: 600;
      line-height: 60px;
      writing-mode: tb-rl;
      font-size: 38px;
      letter-spacing: 10px;
      height: 100%;
      color: #fff;
      margin: 75px auto;
      height: 530px;
      display: flex;
      float: right;
      color: transparent;
      background-image: linear-gradient(0deg, #fff, #fff);
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-size: 100% 100%;
      position: relative;
    }

    .recommendableProjects .left .fistrline {
      animation: firstbg 5s linear;
    }

    .recommendableProjects .left .secondlie {
      animation: secondbg 5s linear;
    }

    .recommendableProjects .left .showWord::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0px;
      /* 伪元素从右边开始，但隐藏起来 */
      width: 0px;
      height: 100%;
      background-image: inherit;
      /* 继承容器的背景 */
      filter: blur(15px);
      /* 应用高斯模糊效果 */
      /*animation: dynamicWidth 5s linear;*/
    }

    @keyframes dynamicWidth {

      /*背景色渐变效果*/
      0% {
        left: 0;
        width: 40px;
      }

      100% {
        left: 100%;
        width: 0;
      }
    }

    @keyframes firstbg {
      0% {
        background-size: 100% 0%;
      }

      50% {
        background-size: 100% 100%;
      }

      100% {
        background-size: 100% 100%;
      }
    }

    @keyframes secondbg {
      0% {
        background-size: 100% 0%;
      }

      50% {
        background-size: 100% 0%;
      }

      100% {
        background-size: 100% 100%;
      }
    }

    .recommendableProjects .left p:first-child {
      border-right: unset;
      width: 80px;
    }

    .recommendableProjects .left p:last-child {
      border-left: 1px solid #fff;
    }

    .recommendableProjects .left p .bi:last-child {
      margin: unset !important;
      right: unset !important;
    }

    .recommendableProjects .left p .bi {
      font-size: 64px;
      color: #fff;
      margin: 130px 0 30px 0;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
      letter-spacing: unset !important;
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
      left: unset !important;
      right: auto !important;
    }

    .recommendableProjects .right ul {
      margin: 40px auto;
    }

    .recommendableProjects .right ul li {
      width: 461.667px;
      visibility: visible;
      animation-delay: 700ms;
      animation-name: fadeInRight;
    }

    .recommendableProjects .right ul li a .list-thumb {
      height: 500px;
      width: 400px;
    }

    .recommendableProjects .right .swiper {
      width: 0%;
      height: 100%;
      left: -6%;
      float: right;
    }
    .recommendableProjects .right .move{
      visibility: visible;
      animation: recommendableProjectsMove 1;
      -webkit-animation: recommendableProjectsMove 1s;
    }
    .recommendableProjects .right  .full{
      width: 100%;
    }
    @keyframes recommendableProjectsMove{
      0% {
        width: 0%;
      }
      50% {
        width: 50%;
      }
      
      100% {
        width: 100%;
      }
  }
    .recommendableProjects .right .swiper-slide {
      margin: 53px 10px;
      box-shadow: -10px 5px 15px #888888;
      height: fit-content;
      width: 23.2% !important;
      min-width: 240px;
    }

    .recommendableProjects .right .swiper-slide a {
      text-decoration: unset;
      color: #000;
    }

    .recommendableProjects .right .swiper-slide .swiper-image {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 480px;
      width: 100%;
    }

    .recommendableProjects .right .swiper-wrapper {
      padding: 0 20px;
    }

    .recommendableProjects .right .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .recommendableProjects .right .swiper-slide .swiper-title {
      height: 65px;
      line-height: 65px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;

    }

    .recommendableProjects .right .swiper-slide .swiper-title h4 {
      font-size: 1.2rem;
      font-weight: 600;
      margin: unset;
      padding: unset;
    }

    .recommendableProjects .right .swiper-slide .swiper-title p {
      margin: unset;
      padding: unset;
      color: #666;
      line-height: 20px;
      padding: 5px;
      border-radius: 5px;
    }

    .recommendableProjects .right .swiper-slide .swiper-title p:hover {
      background-color: #c99f7d;
      color: #fff;
    }


    .aboutLine .aboutTitle h3 {
      margin: 40px 0 20px 0;
      font-size: 36px;
      color: #333;
      font-weight: bolder;
    }

    .aboutLine .video-box {
      padding: unset !important;
    }

    .aboutLine .video {
      opacity: 0.15;
      width: 100%;
      height: fit-content;
    }
    .aboutLine img {
      opacity: 0.15;
      width: 100%;
      height: fit-content;
    }

    .container {
      position: relative;
      padding: unset !important;
    }

    .container video {
      position: relative;
      z-index: 0;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 88%;
    }

    .aboutLine .overlay h3 {
      margin: 60px auto 30px auto;
      text-align: center;
      font-size: 36px;
      font-weight: 500;
      color: #222;
    }

    .aboutLine .overlay p {
      margin: 0 60px;
      font-size: 1em;
      text-indent: 40px;
      line-height: 40px;
    }
    .aboutLine .overlay p  .more{
      float: right;
    }
    .aboutLine .overlay p a{
      color: #292b2c;
    }
    .serviceLine {
      background-image: url(../image/bg10.jpg);
      margin-top: 20px;
      margin-bottom: 60px;
    }

    .serviceLine>.container>.row {
      margin: 0 !important;
    }

    .serviceLine .card:first-child {
      margin: 40px 2% 40px 0;
    }
    .serviceLine .card{
      opacity: 0;
      margin: 40px 2%;
      width: 22%;
      border: unset;
      /*
      visibility: visible;
      animation: initshow 1;
      -webkit-animation: initshow 1s;
      */
    }
    .serviceLine .card:last-child {
      margin: 40px 0 40px 2%;
    }
    .serviceLine .card .card-img-top{
      width: 100%;
    }
    .serviceLine .card .card-block {

      position: absolute;
      bottom: 20px;
      margin: 0 auto !important;
      padding: 5px !important;
      width: 100%;
      background-color: rgba(0, 0, 0, .6);
    }

    .serviceLine .card .card-block .card-title {
      text-align: center;
      margin-bottom: unset;
    }

    .serviceLine .card .card-block .card-title a {
      color: #fff;
      text-decoration: unset;
    }

    .serviceLine .card .card-info {
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      transition: all 300ms ease-out;
      color: #fff;
      opacity: 0;
    }

    .serviceLine .card:hover .card-info {
      opacity: 1;
      background: rgba(0, 0, 0, .7);
      animation: cardinfoshow 0.5s;
    }
    @keyframes cardinfoshow {
      0% {height: 50%;},
      100% {height:100%}
    }

    .serviceLine .card:hover .card-block {
      display: block;
      opacity: 0;
    }
    .serviceLine .card .card-info a{
      color: #fff;
      text-decoration: none;
      
    }
    .serviceLine .card .card-info h5 {
      margin-top: 80px;
      text-align: center;
      font-size: 24px;
      font-weight: 500;
    }

    .serviceLine .card .card-info p {
      margin-top: 20px;
      font-size: 12px;
      line-height: 1.6rem;
    }
    .goTop{
      position: fixed;
      bottom: 120px;
      right: 120px;
      display: block;
      opacity: 1;
      z-index: 999;
      font-size: 48px;
      color: #000;
      cursor: pointer;
    }
    .goTop .bi{
      color: #426e72;
      font-size: 48px;
      vertical-align: middle;
      line-height: 60px;
      }
    .footerLine {
      background-color: #3d4349;
      color: #fff;
      padding: 30px 0;
    }
    .footerLine .footerBox .row{
      display: flex;
      flex-direction: row;
    }
    .footerLine .footerBox .qrcode{
      width: 96px;
      margin-right: 24px;
    }
    .footerLine .footerBox .qrcode img{
      width: 100%;
    }

    .footerLine .footerBox .address{
      padding: unset;
      width: 550px;
    }
    .footerLine .footerBox .address p{
      margin-bottom:0.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space:nowrap;
    }
    .footerLine .footerBox .address .bi{
      margin-right: 5px;
    }
    .footerLine .footerBox .logo{
      flex-grow: 1;
    }
    .footerLine .footerBox .logo img{
      width: 96px;
      float: right;
    }
    @media (min-width: 1024px) {
      .mobile {
        display: none !important;
      }

      .pc {
        display: block !important;
      }
    }

    @media (max-width: 1024px) {
      .mobile {
        display: flex !important;
      }
      .scrollup{
        display: none !important
      }
      .pc {
        display: none !important;
      }
      .footerBox{
        width: 100%  !important;
        padding: 5% !important ;
        
      }
      .recommendableProjects .right .swiper{
        width: 100% !important;
      }
      .serviceLine .card{
        opacity: 1;
      }
      .topimage .columnTitle{
        bottom: 60px !important;
        left: 70% !important;
      }
    }

@keyframes initshow{
        0% {
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0,100%,0);
        }
        
        100% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }


/*imageList*/
.topimage{
  overflow: hidden;
  position: relative;
}
.topimage .columnTitle{
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -600px;
  color: #fff;
  letter-spacing: 3px;
  text-shadow: 2px 2px 2px #333;
}
.topimage .columnTitle h2{
  font-size: 3rem;
}
.imagelistBox{
  display: block !important;
  padding: 20px 0 !important;
  display: flex;
}
.imagelistBox .imageBox{
  height: 100%;
  max-width: unset;
}
.imagelistBox .imageBox:hover{
  font-weight: 600;
  font-size: 3em;
  scale:0.95;
  .card p{
    font-size: 24px;
  }
}
.imagelistBox .card{
  border-radius: 10px;
  height: 100%;
  margin:15px 1.25%
}
.imagelistBox .card:first-child{
  margin-left: 0;
}
.imagelistBox .card:last-child{
  margin-right: 0;
}
.imagelistBox .row{
  height: 100%;
  display: flex;
}
.imagelistBox .card p{
  position: absolute;
  text-align: center;
  display: block;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  left: 0;
  line-height: 130px;
  top: 0;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 18px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.imagelistBox .card img{
  border-radius: 10px;
}
.imagelistSplite .bi{
  margin: 0 auto;
  font-size: 35px;
}
.imagelistSplite hr{
  margin-top: -10px;
}
.textlistBox .titlelist ul{
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
}
.textlistBox .titlelist ul li{
  margin: auto 15px;
}
.textlistBox .titlelist ul li a{
  font-size: 20px;
  text-decoration: none;
  color: #333;
  width: fit-content;    
  display: block;
  margin: 5px auto;
}
.textlistBox .titlelist ul li a.active {
  color: #4f7781;
  border-bottom: 2px solid #4f7781;
}
.textlistBox .titlelist ul li a:hover {
  color: #4f7781;
}

.textlistBox .newsBox{
  display: flex;
}
.textlistBox .newsBox .left{
  width: 30%;
  height: auto;
}
.textlistBox .newsBox .left img{
  width: 100%;
  height: 12rem;
}
.textlistBox .newsBox .right{
  width: 70%;
  height: auto;
  padding-left: 20px;
}
.textlistBox .newsBox .right .title{
  font-size: 1.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.textlistBox .newsBox .right .title a{
  text-decoration: none;
  color: #000;
}
.textlistBox .newsBox .right .title a:hover{
  color: #4f7781;
}
.textlistBox .newsBox .right .description{
  font-size: 1rem;
  text-indent: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  margin-top: 1rem;
  line-height: 36px;
}
.textlistBox .newsBox .right .description a{
  text-decoration: none;
  color: #333;
}
.textlistBox .newsBox .right .description a:hover{
  color: #4f7781;
}


/* article */
.articleBox .newsBox .title p{
  width: fit-content;
  margin: 1rem auto;
  font-size: 2rem;
}
.articleBox .newsBox .content p{ 
  text-indent: 2rem;
}
.articleBox .newsBox .next{
  margin: 50px 100px 20px 100px !important;
}
.articleBox .newsBox .next p{
  width: 100%;
  padding: 0 30px !important;
  font-family: Microsoft YaHei;
  font-size: 14px;
}