.dao{
   width:100%;
   height:65px;
   background-color: white;
   border-bottom: 1px solid rgba( 169,169 ,169 ,0.5 ) ;
   display:flex;
   align-items: center;
}
.dao a{
    height:100%;
    width:150px;
    box-sizing:border-box;
    float:right;
    display:flex;
    color:black;

    text-align:center;
    justify-content: center;
    align-items: center; 
    line-height: 1.5;

    padding:20px 30px;
    text-decoration: none;
    box-sizing: border-box;

    /* border-left: 1px solid  rgba( 169,169 ,169 ,0.5 ); */
    border-right: 1px solid  rgba( 169,169 ,169 ,0.5 );
}
.dao a:hover{
   background-color: black;
   color:white;
 }
 .menu-item {
   position: relative;
   display: inline-block;
}

.drawer-buttons {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   max-height: 0; /* 初始状态下，隐藏内容 */
   overflow: hidden; /* 隐藏超出的部分 */
   opacity: 0;
   display: flex;
   flex-direction: column;
   background-color: #333;
   transition: max-height 0.3s ease-out, opacity 0.3s ease-out; /* 添加过渡效果 */
}

.drawer-buttons button {
   width: 100%;
   height: 40px;
   background-color: black;
   border: none;
   color: white;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.drawer-buttons button:hover {
   background-color: white;
   color:black;
}

/* 当鼠标悬浮时，显示按钮 */

.menu-item:hover .drawer-buttons {
   max-height: 200px; /* 设置按钮容器最大高度以便展开 */
   opacity: 1; /* 设置为完全不透明 */
}

.language-number {
   display: flex;
   align-items: center;
   margin-left: auto;
}
.language-box {
   display: flex;
   margin-right: 20px;
}
.box {
   padding: 5px 10px;
   cursor: pointer;
}

/*  
.dao button{
   padding:10px 20px;
   background-color: white;
   color:gray;
   border:none;
   cursor:pointer;
} */ 

.language-number{
      display: flex;
      flex-direction: column; /* 使 EN 和 CN 在上面，电话号码在下面 */
      justify-content: center;
      align-items: center;
      margin-left: 350px;  /* 让它有一些左侧间距 */
      width: 30px;
   }

.language-box {
   position: relative;
   display: flex;             /* 使用flex布局让EN和CN水平排列 */
   border: 1px solid gray;    /* 为父容器添加边框 */
   border-radius: 5px;        /* 给父容器添加圆角 */
   padding: 5px;              /* 给父容器添加内边距 */
   background-color: white; /* 背景色 */
    width: auto;               
   height: 20px;
   margin: 0 auto;            /* 水平居中对齐 */
   right: 140px;
   bottom: 7px;
}

.box {
   padding: 10px 20px;         /* 设置方框内的内边距 */
   font-size: 14px;            /* 设置文本大小 */
   cursor: pointer;           /* 鼠标悬停时显示为可点击 */
   display: flex;              /* 使用flexbox */
   justify-content: center;    /* 水平居中对齐 */
   align-items: center;        /* 垂直居中对齐 */
   margin: 0 5px;             /* 设置间隔 */
   /* width: auto;               宽度自适应 */
   max-width: 150px;          /* 每个方框的最大宽度 */
   text-align: center;        /* 文本居中 */
}

/* 电话号码样式 */
.number{
   position: relative;
   margin:0;
   width: 20px;
   right: 140px;
   bottom: 25px;
   height:10px ; 
   font-size: 20px;    /* 设置字体大小 */
   color: black;       /* 设置文字颜色 */
   text-align: center; /* 使文本居中 */
}

#moumou{
   width: 100px;
   height: 50px; 
   vertical-align: middle;
   margin:20px 20px ; 
}
#search{
   width: 20px;
   height: 20px; 
   vertical-align: middle;
   margin:20px 20px 20px 50px;
}

.imgfang{
  background-color: black;
  width: 100%;
  height: 500px;
  margin-top: 20px;
}
.brankintroduce{
   color:gray;
   margin: 10px;
   display:inline;

}
.introducediv{
   margin: 10px;
   border-bottom: 2px solid black;

}

.introducediv a {
   margin-right: 10px;   /* 每个链接之间的间距 */
   text-decoration: none; /* 去除默认的下划线 */
   color: black;           /* 设置文本颜色 */
}

.introducediv a:not(:last-child) {
   border-right: 2px solid gray;  /* 在每个链接的右边添加竖线，除最后一个链接 */
   padding-right: 10px;           /* 给右边的竖线留出一些空间 */
}
.lala {
   display: flex;
   justify-content: center; /* 居中对齐 */
 }
 
 .lala a {
   padding: 10px 20px;
   margin: 0 5px;
   text-decoration: none;
   color: rgb(0, 0, 0);
   font-weight: bold;
   transition: all 0.3s ease-in-out;
   position: relative;
   overflow: hidden;
   z-index: 1;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.06);
   border-radius: 5px;
 }
 .lala a:hover {
   background-color: black;
   color: white;
   transform: scale(1.1);
 }

 .figure{
   display: flex;
   justify-content: center; /* 居中对齐 */   
 }
 .figure a{
   padding: 7px 5px;
   margin: 0 5px;
   text-decoration: none;
   color: rgb(0, 0, 0);
   font-weight: bold;
   transition: all 0.3s ease-in-out;
   position: relative;
   overflow: hidden;
   z-index: 1;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.06);
   border-radius: 5px;
 }

.connection1 p{
   text-align: center;
}

.connection1 h2{
   text-align: center;
}
.box-container {
   display: flex; /* 开启 Flexbox 布局 */
   gap: 20px; /* 子元素之间的间距 */
   border-bottom:4px solid black ;
 }

 .box1 {
   width: 25%; /* 每个区域的宽度 */
   height: auto; /* 高度根据内容自适应 */
 }

 .box2{
  padding-left: 50px;
   width: 25%;
   height: auto;
 }
 .box-white{
   position: relative;
   width: 30%;
   top: 30px;
   display: flex;
   align-items: center;
   gap: 20px; /* 设置子元素之间的间距 */
}
.box-white h3 {
   position: relative;
   left: 140px;
   display: inline-block;
}
.banner-main {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
            justify-content: center; /* 水平居中 */
            align-items: flex-start; /* 垂直顶部对齐 */
            gap: 20px; /* 设置图片之间的间隔 */
            margin: 20px 0; /* 上下外边距 */
        }
        .banner-item {
            text-align: center; /* 文本居中对齐 */
            margin: 0; /* 移除外边距 */
            padding: 0; /* 移除内边距 */
            width: calc(25% - 20px); /* 减去间隙宽度 */
            transition: opacity 1s ease-in-out;
            cursor: pointer; /* 改变鼠标指针为手型 */
        }
        .banner-item.active {
            opacity: 1; /* Visible when active */
        }
        .banner-item img {
            width: 100%; /* 图片宽度 */
            height: auto; /* 图片高度自动 */
            object-fit: cover; /* 保持图片比例 */
            transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
        }
        .banner-item:hover img {
            transform: scale(1.1); /* 放大图片 */
        }
        .banner-item p {
            margin-top: 10px;
            width: 100%; /* 确保描述文本宽度与图片一致 */
        }
        .description {
            margin: 5px 0; /* 描述与图片之间的间隔 */
        }
        .price {
            color: #ff0e0e;
        }
        
.jingdian{
   position: relative;
   width: 50%;
   display: flex;
   left: 500px;
}
.jingdian h1{
   position: relative;
   top: 40px;
}
.imgs {
   position: relative;
   height: 270px;
   top: 20px;
}

.image-wrapper {
   position: relative;
   width: 43%;
   left: 100px;
   display: inline-block;
}

.image-wrapper img {
   width: 100%;
   border: 10px solid white;
   
}

.overlay {
   position: absolute;
   top: 8px;
   left: 8px;
   width: 100%;
   height: 92%;
   background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
   color: white;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   opacity: 0; /* 初始不显示 */
   transition: opacity 0.3s ease-in-out; /* 过渡效果 */
   z-index: 2; /* 确保覆盖在图片之上 */
   text-align: center; /* 文字居中 */
}

.overlay h1 {
   margin: 0;
   font-size: 24px;
}

.overlay h5 {
   margin: 0;
   font-size: 16px;
}

.image-wrapper:hover .overlay {
   opacity: 1; /* 鼠标悬停时显示 */
}

.wen {
   position: absolute;
   width: 15%;
   height: 70px;
   bottom: 160px;
   left: 310px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}

.zi {
   position: absolute;
   width: 15%;
   height: 70px;
   bottom: 230px;
   left: 950px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}


/* 外层容器 */
.abc {
   padding-top: 10px;
   display: flex; /* 使用 Flexbox 让子容器水平排列 */
   justify-content: flex-start; /* 水平对齐，默认左对齐 */
   gap: 0; 
   margin-bottom: 5px;
   margin-top: 15px;
 }

 .weather{
    margin-left:auto;
    padding-left:10px;
    padding-right:10px;
    background-color: lightblue;
    color:white;
    border-radius: 10px;
  }
  .weather:hover{
    background-color: lightcyan;
    color:lightskyblue;
}
  

 
 /* .introduction 容器 */
 .introduction {
   display: flex;
   gap: 15px; /* 每个链接之间的间距 */
   background-color: black;
   margin-right: 20px;
   padding:5px;
 }
 
 /* 友情链接容器 */
 .friend-links {
   display: flex; /* 友情链接也使用 Flexbox 排列 */
   align-items: center; /* 垂直居中对齐 */
   background-color: white;
   margin-right:20px;
 }
 
 .introduction a{
   padding: 10px 15px; /* 内边距 */
   background-color: black; /* 背景颜色 */
   color: white; /* 文字颜色 */
   text-decoration: none; /* 去掉下划线 */
   border-radius: 0px; 
   transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */
 }
 .flower {
   display: flex;
   justify-content: space-between; /* 使子元素之间有空间 */
   margin: 0 20px; /* 添加左右外边距 */
}
.flowerq {
   display: flex;
   justify-content: space-between; /* 使子元素之间有空间 */
   margin: 0 20px; /* 添加左右外边距 */
}
.flowerw {
   display: flex;
   justify-content: space-between; /* 使子元素之间有空间 */
   margin: 0 20px; /* 添加左右外边距 */
}

.flower-box {
   display: flex;
   width: 47%; /* 增加宽度以减少间距 */
   height: 200px;
   top: 50px;
   margin-bottom: 20px; /* 添加底部间距 */
   transition: opacity 1s ease-in-out;
   cursor: pointer;
}

.flower-box img {
   max-width: 40%; /* 图片的最大宽度为父容器的宽度 */
   height: auto;   /* 自动调整高度以保持比例 */
   margin-right: 10px; /* 添加图片和文本之间的间距 */
   object-fit: cover;
   transition: transform 0.3 ease-in-out;
}
.flower-box:hover img{
   transform: scale(1.1);
}
.flower-grey {
   position: relative;
   width: 60%;
   background-color: #d4d2d282;
   padding: 10px; /* 添加内边距 */
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}


.flower-grey h5 {
   font-size: 14px; /* 调整字体大小 */
   margin: 0;
}

.link-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 10px;
}

.link-container a {
   text-decoration: none;
}

.link-container img {
   width: 20px; /* 设置图片宽度 */
   height: 20px; /* 设置图片高度 */
}

.link-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 10px;
}

.link-container a {
   text-decoration: none;
}

.link-container img {
   width: 20px; /* 设置图片宽度 */
   height: 20px; /* 设置图片高度 */
}

.link-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 10px;
}

.link-container a {
   text-decoration: none;
}

.link-container img {
   width: 20px; /* 设置图片宽度 */
   height: 20px; /* 设置图片高度 */
}

.link-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 10px;
}

.link-container a {
   text-decoration: none;
}

.link-container img {
   width: 40px; /* 设置图片宽度 */
   height: auto; /* 设置图片高度 */
}
 .friend-links a {
   /* display: inline-block; 确保每个链接是块状元素 */
   padding: 10px 15px; /* 内边距 */
   background-color: white; /* 背景颜色 */
   color: black; /* 文字颜色 */
   text-decoration: none; /* 去掉下划线 */
   border-radius: 0; 
   transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */
 }
 
 .introduction a:hover,
 .friend-links a:hover {
   background-color: black; /* 鼠标悬浮时背景颜色变化 */
   color: white; /* 鼠标悬浮时文字变为白色 */
   transform: scale(1.2); /* 鼠标悬浮时放大 */
 }
.shuiping{
   display: flex;
   justify-content: center;
   align-items: center;
   padding-bottom: 20px;
}
.shuiping div{
   border:1px solid gray;
   width:20%;
   height: 200px;
   padding-top:20px ;
}
.figure a:hover {
   background-color: black;
   color: white;
   transform: scale(1.1);
 }
 .figureone {
   display: flex;
   justify-content: center; /* 居中对齐 */
   margin-top: 250px; /* 增加顶部外边距 */
}

.figureone a {
   padding: 7px 5px;
   margin: 0 5px;
   text-decoration: none;
   color: rgb(0, 0, 0);
   font-weight: bold;
   transition: all 0.3s ease-in-out;
   position: relative;
   overflow: hidden;
   z-index: 1;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.06);
   border-radius: 5px;
   background-color: #f5f5f5; /* 添加背景颜色 */
   color: #333; /* 调整字体颜色 */
}

.figureone a:hover {
   background-color: black;
   color: white;
   transform: scale(1.1);
}
.figuretwo {
   display: flex;
   justify-content: center; /* 居中对齐 */
   margin-top: 70px; /* 增加顶部外边距 */
}

.figuretwo a {
   padding: 7px 5px;
   margin: 0 5px;
   text-decoration: none;
   color: rgb(0, 0, 0);
   font-weight: bold;
   transition: all 0.3s ease-in-out;
   position: relative;
   overflow: hidden;
   z-index: 1;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.06);
   border-radius: 5px;
   background-color: #f5f5f5; /* 添加背景颜色 */
   color: #333; /* 调整字体颜色 */
}

.figuretwo a:hover {
   background-color: black;
   color: white;
   transform: scale(1.1);
}
.xin{
   position: relative;
   width: 60%;
   display: flex;
   left: 500px;
   top: 40px;
}
.xin img{
   width: 300px;
   height: 10px;
}
.new{
   position: relative;
   right: 300px;
}
.qwe{
   position: relative;
   bottom: 10px;
   right: 10px;
}
.qwe h1 {
   font-size: 40px; /* 调整字体大小 */
   margin: 0;
}
.banner-mainq {
   display: flex;
   flex-wrap: wrap; /* 允许换行 */
   justify-content: center; /* 水平居中 */
   align-items: flex-start; /* 垂直顶部对齐 */
   gap: 20px; /* 设置图片之间的间隔 */
   margin: 0px 0; /* 上下外边距 */
   position: relative;
   top: 40px;
}
.imgsq {
   position: relative;
   height: 200px;
   top: 60px;
}

.image-wrapperq {
   position: relative;
   width: 43%;
   left: 100px;
   display: inline-block;
}

.image-wrapperq img {
   width: 100%;
}

.overlayq {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
   color: white;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   opacity: 0; /* 初始不显示 */
   transition: opacity 0.3s ease-in-out; /* 过渡效果 */
   z-index: 2; /* 确保覆盖在图片之上 */
   text-align: center; /* 文字居中 */
}

.overlayq h1 {
   margin: 0;
   font-size: 24px;
}

.overlayq h5 {
   margin: 0;
   font-size: 16px;
}

.image-wrapperq:hover .overlayq {
   opacity: 1; /* 鼠标悬停时显示 */
}

.wenq {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 60px;
   left: 310px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}

.ziq {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 130px;
   left: 950px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}
.wenqw {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 960px;
   left: 310px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}

.ziqw {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 1035px;
   left: 950px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}
.wenqwe {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 845px;
   left: 310px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}

.ziqwe {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 920px;
   left: 950px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}
.wenqwer {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 705px;
   left: 310px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}

.ziqwer {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 780px;
   left: 950px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}
.wenqwert {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 585px;
   left: 310px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}

.ziqwert {
   position: relative;
   width: 15%;
   height: 70px;
   bottom: 660px;
   left: 950px;
   background-color: rgba(0, 0, 0, 0.559);
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   text-align: center; /* 确保文本内容在块级元素内居中 */
}
.ab{
   position: relative;
   bottom: 700px;
}