body{
	background: #f0f5fb;
}
.zongcontainer {
    margin: 0;
    display: flex;
    flex-direction: row; /* 默认情况下设置为横向排列 */
    align-items: flex-start;
    justify-content: center;
    background: #f0f5fb;
    flex-wrap: wrap;
}
.text-container {
    max-width: 350px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-right: 20px; /* 为 image-container 留出间隔 */
    flex: 1;
    color: #000;
    font-size: 1.5rem;
}
.suoduan{
	margin-top: 10px;
}
.text-container h3{
    font-size: 1.57em;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 0px;
}
.image-container {
    position: relative;
    max-width: 1400px;
    width: 100%;
    flex: 2;
}

.image-container img {
    width: 100%;
}
@media (max-width: 768px) {
    .zongcontainer {
        flex-direction: column; /* 在手机端将布局设置为纵向 */
        align-items: center;
    }

    .text-container {
        max-width: 100%;
        margin-right: 0; /* 移除边距 */
        margin-bottom: 15px; /* 在手机端为 text-container 添加底部间距 */
       margin-top: 0px;
    }
}
.hotspot {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: blue;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s;
    cursor: pointer;
    outline: none; /* 移除焦点轮廓 */
   font-size: 1.5rem;
}

.hotspot:hover {
    background-color: white;
    color: blue;
}

.image-display {
    display: flex; /* 修改这里 */
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease; /* 添加 transform 过渡 */
}

.image-display.show {
    visibility: visible;
    opacity: 1;
    transform: scale(1); /* 显示时缩放 */
}
.image-display.show video {
    pointer-events: auto; /* 确保 video 元素可以交互 */
}
#media-container img,
#media-container video {
    max-width: 400px;
    height: auto;
    width: 100%;
}

#close-button {
    position: absolute;
    top: 80px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* 增加阴影 */
}

#image-description {
    margin-top: 15px;
    color: white;
    margin-left: 10px;
    max-width: 400px;
    font-size: 1.4rem;
}

@media (max-width: 768px) {
    .image-display {
        flex-direction: column; /* 垂直方向布局 */
        justify-content: center;
        align-items: center;
    }

    .hotspot {
        width: 15px;
        height: 15px;
        font-size: 1rem;
    }
}

@media (max-width: 400px) {
    .hotspot {
        width: 13px;
        height: 13px;
        font-size: 0.8rem;
    }
}
/* 设置联系板块的整体样式 */
/* form-container 样式设置 */
.form-container {
    width: 100%;
    /*background-color: white;*/
   background: url(../webp/biaodanbeijingtuah.webp) no-repeat;
    display: flex;
    justify-content: center;
    padding: 0px 20px;
    box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.form-content {
    max-width: 600px;
    width: 100%;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    margin-top: -100px; /* 控制表单内容向上延伸 */
}

/* 表单标题样式 */
.form-content h2 {
    font-size: 24px;
    color: #222;
    font-weight: 600;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

/* 输入框和文本域样式 */
.form-content input {
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1.5rem;
    color: #333;
    width: 40%;
    background-color: #fafafa;
    transition: border-color 0.3s ease;
    margin-bottom: 15px;
}

.form-content textarea {
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1.5rem;
    color: #333;
    width: 90%;
    background-color: #fafafa;
    transition: border-color 0.3s ease;
    margin-bottom: 15px;
}

.form-content input:focus, .form-content textarea:focus {
    border-color: #666;
    outline: none;
    background-color: #fff;
}

/* 提交按钮样式 */
.form-content button {
    background-color: #222;
    color: white;
    border: none;
    padding: 12px;
    font-size: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    width: 100%;
}

.form-content button:hover {
    background-color: #ffce00;
}

/* 联系方式按钮样式 */
.contact-buttons {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
}

.contact-btn {
    background-color: #ffce00;
    color: black;
    padding: 10px 15px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    width: 160px;
    text-decoration: none;
}

.contact-btn:hover {
    background-color: #333;
    color: #ffce00;
}

@media (max-width: 768px) {
    .form-content, .contact-buttons {
        max-width: 100%;
    }
    .form-container {
        padding: 0px 10px;
        flex-direction: column;
        align-items: center;
        
    }
    .form-content{
    	margin-top: 0px;
    }
    .contact-buttons {
         /* 将按钮排列为垂直方向 */
        align-items: center; /* 居中对齐 */
        margin-top: 0px;
    }
}
@media (max-width: 380px){
	.form-content input{
		width: 90%;
	}
}
.gallery-container {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    margin-top: 100px;
}

.main-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
}
.thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.thumbnails img {
    width: 100px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: border-color 0.3s ease;
}

.thumbnails img:hover {
    border-color: #ffce00;
}

/* 左侧画廊样式 */
.gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    position: relative;
}
.main-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
}

.gallery-image {
    width: 100%;
    display: none;
    border-radius: 8px;
    transition: opacity 0.5s ease;
}

.gallery-image.active {
    display: block;
}


/* 右侧文字区域样式 */
.gallery-text {
    width: 50%;
}

.gallery-text h3 {
    font-size: 24px;
    color: #222;
    font-weight: bold;
    margin-bottom: 15px;
}

.gallery-text p {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .gallery-container {
        flex-direction: column;
        text-align: center;
    }
    .gallery {
        width: 100%;
    }
    .gallery-text {
        width: 100%;
    }
}



.why-choose-us {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 左右居中对齐所有子项 */
 background-color: white;
 padding: 20px;
}

.top-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  align-items: center; /* 左右居中对齐 */
}

.top-section .item {
  display: flex;
  align-items: center;
  justify-content: center; /* 左右居中对齐 */
}

.top-section .item img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.bottom-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center; /* 左右居中对齐每个子项 */
}

.bottom-section .item {
  text-align: center;
      max-width: 500px;
}

.bottom-section .item img {
  width: 100%;
  height: auto;
  max-width: 100px;
}

/* 手机端样式 */
@media (max-width: 768px) {
  .top-section .item {
    flex-direction: column;
    align-items: center; /* 左右居中对齐 */
  }

  .bottom-section {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* 悬浮效果的样式 */
.why-choose-us .item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-us .item:hover {
  transform: scale(1.05); /* 放大效果 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}





.custom-tabs-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  max-width: 1400px; /* 设置一个合适的最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding-top: 20px;
  box-sizing: border-box;
  margin-bottom: 50px;
}
.custom-tabs {
  width: 20%;
  padding-right: 20px;
}

.custom-tab {
  padding: 10px;
  cursor: pointer;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.custom-tab.active {
  font-weight: bold;
  background-color: #276dc1;
  color: white;
}

.custom-content {
  width: 75%;
  display: flex;
  justify-content: space-between;
}

.custom-description-container {
  width: 30%;
}

.custom-description {
  display: none;
}

.custom-description.active {
  display: block;
}

.custom-image-container {
  width: 68%;
}

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

.custom-image {
  display: none;
}

.custom-image.active {
  display: block;
}

.custom-description p {
  font-size: 14px;
  color: #555;
}

/* 手机端样式（屏幕宽度小于768px时） */
@media (max-width: 768px) {
  .custom-tabs-container {
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 居中对齐 */
  }
  
  .custom-tabs, .custom-description-container, .custom-image-container {
    width: 100%; /* 占满整个宽度 */
    padding: 0;
    text-align: center;
  }
  
  .custom-image img{
  	width: 100%;
  }

  .custom-tabs {
    margin-bottom: 20px; /* 添加间距 */
  }

  /* 让内容垂直排列 */
  .custom-content {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .custom-description-container {
    margin-bottom: 20px; /* 添加间距 */
  }
  .suoduan{
  	display: none;
  }
}