body {
      margin: 0;
    }

    .navbar {
      position: fixed;
      top: 0;
      width: 100%; background: rgba(0,0,0,0.5);
      z-index: 1000;
    }

    .navbar-brand img {
      max-height: 30px;
    }

    .navbar-collapse {
      justify-content: flex-end; /* 导航按钮右对齐 */
    }

    .section {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      height: 100vh; /* 设置每个section的高度为视口高度 */
    }

    .banner{height: 100vh;}



    .carousel-control-prev i,
    .carousel-control-next i{
     font-size:2rem; 
    }


 
    .navbar-nav {
      flex-direction: row; /* 导航按钮水平布局 */
    }

    .navbar-nav .nav-item {
      margin-right: 10px; /* 调整导航按钮之间的间距 */
    }

    .section {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }


  .service {
    padding: 0.5rem;margin:1rem;
    text-align: center;
    border-radius: 10px;
    transition: transform 0.5s ease-in-out;
  }
  .service h4{font-size:2rem;font-weight:500}
    .service i{font-size:6rem;}

  .service:hover {
    transform: rotateY(180deg);
  }


.contact{ text-align: left; color:#333; }
.text-muted{font-size:1.2rem;}

.news{text-align: left; color:#333; }

  /* 自定义样式，将标签页居中 */
        #aboutTabs {
            display: flex;
            justify-content: center;
        }

        /* 自定义样式，调整标签页之间的间距 */
        .nav-item {
            margin-right: 20px;
        }
.white{ color:#fff;}
.black{ color:#000;}
.black3{ color:#333}
.black6{color:#666}
.black9{ color:#999}
.blackf{color:#f1f1f1;}

.black3s{ color:#333; background:rgba(255,255,255,0.95);border-top:2px solid #55a795}


.carousel-caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.banner h1{ font-size:3.3rem; font-weight:100;}

 .carousel-caption h1 {
      overflow: hidden;
      white-space: nowrap;
      display: inline-block;
      animation: typing 5s steps(30, end);
    }

    @keyframes typing {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    }
	
	.card-body{padding:0.8rem}
	
	 .footer {
      color: #333;
      text-align: center;
      position: absolute;
      bottom: 0;
    }
	
	.about li a{font-size:1.6rem;}
	.tab-content{ background:rgba(255,255,255,0.85); color:#333; border-radius:0  0 25px 25px}
		.tab-content p{font-size:1.2rem; line-height:2rem;}
		.fr{ float:right}
		.fl{ float:left}
	
.case{ background:#f1f1f1;}
.newslist{ overflow:hidden}
.fenlei{ height:100%; background:#f1f1f1;}
.fenlei li{font-size:1.8rem; line-height:3.6rem;font-weight:100; list-style:none}
.newslist-list{border-bottom:1px solid #f1f1f1;}
.newslist-list:hover{box-shadow:0 0 10px rgba(0, 0, 0, 0.1);}
.newslist-list h5{font-size:1.8rem;font-weight:100}
.newslist-list h5 span{ font-weight:100;font-size:1rem}
.news h5{font-size:1.8rem;font-weight:100}
.news h5 span{font-weight:100;font-size:1rem}
.news-list{box-shadow:0 5px 10px rgba(0, 0, 0, 0.1);}

 /* 初始状态隐藏内容 */
    .hidden-content {
      opacity: 0;
      transform: translateY(20px);
    }
	.caselist{ overflow:hidden}
	
	    .case-list {
      display: flex;
      flex-wrap: wrap;
    }

    .case-item {
      width: 50%;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
    }

    .case-image {
      width: 100%;
      height: auto;
      transition: transform 0.3s;
    }

    .case-item:hover .case-image {box-shadow:0 5px 10px rgba(0, 0, 0, 0.4);
    }

    .buttons-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .case-item:hover .buttons-container {
      opacity: 1;
    }
	
	
	
	
	
	   .case-list {
      display: flex;
      flex-wrap: wrap;
    }

    .case-image {
      width: 100%;
      height: auto;
      transition: transform 0.3s;
    }

    .case-item:hover .case-image {
      transform: scale(1.1);
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 1;
    }

    .case-item:hover .overlay {
      opacity: 1;
    }

    .buttons-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 2;
    }

    .case-item:hover .buttons-container {
      opacity: 1;
    }

    .case-titles {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: white; /* Set text color to white or another color that works well with the overlay */
      padding: 10px;
      box-sizing: border-box;
      z-index: 2;
    }



.drift{  height:auto; position:fixed; bottom:30%; right:2px; z-index:2001;_position: absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));-margin-top:350px;}
.drift li{ width:50px; height:49px; margin-bottom:3px;position: relative; list-style:none}
.drift li i{font-size:24px;height:49px; line-height:49px; text-align:center; display:block}
.drift li a{ display:block;width:50px; height:49px; background:#ddd; overflow:hidden;}
.drift li a:hover{ background:#e9303c;}
.drift #roll a{background:#e9303c ;}
.drift li a:hover span{display:block;}
.drift li span{width:146px; right:51px;top: 0;height: 49px;line-height: 49px; background: #e9303c;color: #fff;text-align: center;font-family:Arial;position: absolute;font-size: 22px;font-weight: bold;display: none;}
.drift li .dh{width:180px;}
.drift li .ewm{background:#fff;height:183px;border:1px solid #EEEFF1;}
.drift li .ewm img{width:146px;display:block;overflow:hidden;padding:10px 10px 0 10px;width:146px;}
.drift li .ewm em{height:40px;line-height:18px;overflow:hidden;  font-family: "Microsoft YaHei";font-size:12px;font-weight:normal;color:#000;}

.caselist img{ width:100%;}
@media (max-width:768px){
.banner h1{font-size:2rem;}
.service i{font-size:4rem;}
.service h4{font-size:1.5rem;}
.news h5{font-size:1.3rem;}

}