.joinus::before{
  background: url('../imgs/joinus/JOINUSbanner.png') center/cover no-repeat;
}
.multi-bg {
  background-image: 
  url('../imgs/joinus/花瓣素材_医疗系列绿色细胞壁细菌群+_193898411.png'),
  url('../imgs/joinus/8252cf9abe134561612612d62476702f.png');
  background-position: 
    right 270px top 30%,     /* 第一个图片位置 */
    left 0px top -235px, /* 第二个图片位置 */
    left 0px bottom -330px; /* 第二个图片位置 */
  background-repeat: 
    no-repeat,    /* 第一个图片不重复 */
    no-repeat,    
    no-repeat;   
  background-size: 
    auto,   /* 第一个图片尺寸 */
    auto,       /* 第二个图片尺寸 */
    auto;       /* 第二个图片尺寸 */
}
.bg-img{
  position:absolute;
  z-index: -1;
}
.bg-img1{
  top: 347px;
  right: -223px;
  width: 666px;
  height: 650px;
  background-image: url('../imgs/joinus/矢量智能对象.png');
  /* background-position:  right 270px top 30%; */
  background-repeat: no-repeat; 
  background-size: 55%;   

}
.bg-img2{
  top: 17%;
  left: -21%;
  width: 68%;
  height:60%;
  background-image:url('../imgs/joinus/微信图片_1.png');
  /* background-position:  right 270px top 30%; */
  background-repeat: no-repeat; 
  background-size: 100%;   
}
.bg-img3{
  bottom: -8%;
  left: 51%;
  width: 65%;
  height: 33%;
  background-image:url('../imgs/joinus/微信图片_2.png');
  background-position:  right 0px top 30%;
  background-repeat: no-repeat; 
  background-size: 77%;   
}

.blueBox {
  width: 475px;
  height: 430px;
  position: absolute;
  top: -80px;
  left: 65%;
  transform: translate(-50%, -50%);
  background-color: #deefff;
  z-index: 50;
  border-radius: 20px;
  box-shadow: rgb(173, 172, 172) 5px 5px 15px;
  padding: 20px 35px;
}

@keyframes customFadeInUp {
  from {
    opacity: 0;
    transform: translateY(200px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blueBox.InUp {
  animation: customFadeInUp 1s forwards;
  /* position: relative; 确保动画结束后保持位置 */
}

.contact-title {
  /* font-size: 28px; */
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  color: #000000;
  margin-bottom: 25px;
  text-align: left;
}

.description {
  padding-bottom: 15px;
  /* font-size: 16px; */
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  color: #333333;
  line-height: 1.5;
  border-bottom: 1px solid #c2c2c2;
}

.contact-details {
  margin-bottom: 10px;
}

.contact-item {
  display: inline-block;
  margin-bottom: 10px;
  /* font-size: 16px; */
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  color: #333333;


  /* 强制换行 */
  word-wrap: break-word;
  /* 旧版浏览器兼容 */
  overflow-wrap: break-word;
  /* 新版标准属性 */

  /* 防止长单词或URL溢出 */
  word-break: break-word;

  /* 可选：设置最大宽度 */
  max-width: 85%;
  /* 确保不超过父容器宽度 */
}

.contact-label {
  font-weight: bold;
  display: inline-block;
  margin-right: 5px;
  /* width: 80px; */
}

.response-info {
  /* font-size: 15px; */
  font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
  color: #333333;
  line-height: 1.4;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
}
.bt-box{
  margin-left: 18%;
  width: 28%;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.section-bt {
  width: 170px;
  height: 30px;
  border: none;
  border-radius: 25px;
  opacity: 0.7;
}

.section-bt:hover {
  opacity: 1;
}

.section-bt1 {
  margin-right: 20px;
}

.box1 {
  width: 48%;
  margin-top: 100px;
}
@media (max-width:640px) {
  .box1 {
    width: 100%;
  }
}

.p-word {
  /* 强制换行 */
  word-wrap: break-word;
  /* 旧版浏览器兼容 */
  overflow-wrap: break-word;
  /* 新版标准属性 */

  /* 防止长单词或URL溢出 */
  word-break: break-word;

  /* 可选：设置最大宽度 */
  max-width: 100%;
  /* 确保不超过父容器宽度 */
}
.ways{
  display: flex;
  justify-content: space-between;

  padding-top:50px; 
}
.ways-item{
  width: 30%;
  height: 220px;
  /* background-color: #deefff; */
  border-radius: 20px;
  padding: 20px 15px;
  border: 1px solid #c2c2c2;
  box-sizing: border-box;
  background: #ffffff;
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (max-width:1500px) {
  .ways-item{
    padding: 20px 7px;
  }
}

.ways-item ul {
  /* list-style: none;  移除列表标记 */
  padding-left: 20px;   /* 移除默认内边距 */
  /* margin: 0;         移除默认外边距 */

  color: var(--muted);
}

.ways-item:hover{
  background-color: #deefff;
  border:1px solid transparent;
 cursor: pointer;

 transform: translateY(-2px);
}
/* 背景渐变结合文本裁剪技术 */
.ways-item:hover span{
  background: linear-gradient(45deg, #2a7ec0, #40b4fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.formbox{
  /* max-width: 800px; */
  margin-top: 50px;
  border-radius: 20px;
  /* box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); */
  /* padding: 40px 80px; */
  padding: clamp(20px, 5vw, 40px) clamp(30px, 8vw, 80px);
  border: 1px solid #cccccc;

}

/* -----表单------------------- */
.intro {
  margin-bottom: 30px;
  color: #555;
  text-align: center;
}

/* h2 {
  font-size: 20px;
  margin: 30px 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  color: #2c3e50;
} */

.form-group {
  margin-bottom: 20px;
  /* width: 30%; */
  /* display: inline-block; */
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #444;
  text-align: left;

}

.required:after {
  content: " *";
  color: #e74c3c;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  /* font-size: 16px; */
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  transition: all 0.3s;
}

input:focus,
textarea:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.hint {
  /* font-size: 14px; */
  font-size: clamp(0.75rem, 1.3vw, 0.875rem);
  color: #7f8c8d;
  margin-top: 5px;
}

.checkbox-group {
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
}

.checkbox-item {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 40px;
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: flex-start;

  /* transition: background-color 0.3s ease; 添加颜色过渡效果 */
}
.checkbox-item:hover {
  /* border-color: #3498db; */
  cursor: pointer;
  background: linear-gradient(90deg, #2a7ec0, #67c5ff);
}
 .active1 {
  background: linear-gradient(90deg, #2a7ec0, #67c5ff);
}

.checkbox-item input[type="checkbox"]:checked {
  accent-color: #fbfcfd; /* 修改原生复选框颜色 */
  color: black;
}

.checkbox-item input {
  margin-right: 10px;
  margin-top: 3px;
  transform: scale(1.2);
}

.checkbox-item label {
  margin-bottom: 0;
}

.instruction {
  /* font-size: 14px; */
  font-size: clamp(0.75rem, 1.3vw, 0.875rem);
  color: #7f8c8d;
  margin-top: 5px;
}

hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 30px 0;
}

.privacy-checkbox {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;

  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 40px;
}

.privacy-checkbox input {
  margin-right: 10px;
  transform: scale(1.2);

  /* 垂直居中 */
  align-self: center
}

.privacy-checkbox label {
  margin-bottom: 0;
}

.submit-btn {
  background: linear-gradient(to right, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 14px 30px;
  /* font-size: 20px; */
  font-size: clamp(1rem, 2vw, 1.25rem);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 400;
  display: block;
  width: 100%;
  margin-top: 40px;
  box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.submit-btn:active {
  transform: translateY(0);
}

.agreement {
  margin-top: 20px!important;

  text-align: left;
}

.error {
  color: #e74c3c;
  /* font-size: 14px; */
  font-size: clamp(0.75rem, 1.3vw, 0.875rem);
  margin-top: 5px;
  text-align: left;
  display: none;
}

.success-message {
  background-color: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 4px;
  margin-top: 20px;
  display: none;
}

.flex-css{
  display: flex;
  justify-content: space-between
}
.form-div-w{
  width: 45%;
}
/* @media (max-width: 600px) {
  .container {
      padding: 20px;
  }
  
  h1 {
      font-size: 24px;
  }
  
  h2 {
      font-size: 18px;
  }
} */

/* 移动端统一兜底 */
@media (max-width: 640px) {
  /* 所有字体最小值兜底 */
  .contact-title,
  .description,
  .contact-item,
  .response-info,
  .submit-btn,
  .error,
  .logo span,
  .label-title,
  /* input[type="text"], */
  /* input[type="email"], */
  /* input[type="tel"], */
  textarea,
  .hint,
  .instruction {
    font-size: clamp(1.25rem, 3vw, 1rem) !important;
  }
  .section-head .p-word2 {
    font-size: 16px;
  }
  .privacy-checkbox input {
    align-self: auto
  }
}

.logo {
  text-align: center;
  margin-bottom: 20px;
}

.logo span {
  /* font-size: 32px; */
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: bold;
  background: linear-gradient(90deg, #2a7ec0, #67c5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ----------------------------------- */
#applicationForm input {
  border-radius: 10px;
}
.label-title{
  /* font-size: 20px; */
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 550;
  color: #000000;
  margin-bottom: 15px;
}