.joinmain{width: 100%; border-top: 2px solid gray; border-bottom: 2px solid gray; padding: 150px 17%; }
.joins{display:flex; align-items:center; }
.joins .info{ width: 50%; float: right;}
.joins h3{ padding: 40px 2vw 80px; line-height: 40px; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.joins h3 span{ font-size: 36px; }
.joins h3 i{ font-size: 28px; }
.joins .libs{padding-left: 4%;margin-bottom: 20%;}
.joins .libs p{ padding:0 2vw;color: #fff; line-height: 1.3; display:flex; font-style:italic; align-items: baseline;}
.joins .libs p:first-child{ padding-bottom:30px; }
.joins .libs p:last-child{ border-bottom: none; }
.joins .libs p i{ display: block; font-size: 26px; margin-right:20%;font-style:italic; }
.joins .libs p span{ display: block; font-size: clamp(16px, 1vw, 20px); color:#fff; transform: scaleY(0.9);  }
.joins .libs p span a{ display: block; font-size: 16px; color:#fff;  }
.joins .libs p .code{ display: block; width: 140px; margin-top: 5px; }
.joins .libs p .jt{ position: absolute; right: 2vw; bottom: 20px; }
.chineseAddress{font-style: normal; transform: scaleY(1.1) !important;}
.joins .form{ width: 50%; padding: 50px 4% 50px 0; position: relative; border-right: 2px solid gray; }
.joins .form h3{ color: #fff; }
.joins .fills{ width: 90%; max-width: 840px; margin:0 auto; overflow: hidden;  }
.joins .fills dl { width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid gray;}
.joins .fills dt { display: flex; align-items: center; height: 70px; line-height: 70px; width: 25%; }
.joins .fills dt{ display: flex; align-items: center; height:24px; margin:20px 0 10px 0; line-height:1.5;color:gray;  }
.joins .fills dt span{ font-size: 14px; font-style:italic;padding: 0 8px; }
.joins .fills dt i{ font-size: 18px; padding: 0 2px;font-style:italic; }
.joins .fills dt em{ font-size: 16px; color: #a38269; }
.joins .fills dd{ width: 75%;}
.joins .fills dd input{ display: block; width: 100%; height: 70px; line-height: 70px; border:none; background-color: transparent; font-size: 16px; color: #fff;    font-family: 'HarmonyOS Sans SC', 'Arial', 'Helvetica', sans-serif; font-weight: 300;}
.joins .fills dd textarea{ display: block; width: 100%; height: 100px; margin-top: 15px; line-height: 30px; border:none; background-color: transparent; font-size: 16px; color: #fff; resize: none; font-family: 'HarmonyOS Sans SC', 'Arial', 'Helvetica', sans-serif;font-weight: 300;}
.joins .fills dl.all{ width: 100%; }
.joins .send{ display: block; display: flex; align-items: center; justify-content: center; width: 90%; height: 58px; line-height: 58px; background-color: #a38269; color: #fff; text-align: center; margin:58px auto 0; border-radius: 42px; transition: all 0.6s; cursor: pointer; }
.joins .send span { font-size: 20px; font-style: italic; font-weight: 400; transform: scaleY(0.9); }
.joins .send i{ font-size: 18px; }
.joins .send:hover{ text-decoration:underline; }
.qrcode{ position: absolute; top:96%; left:8%;transition: opacity 0.5s ease;opacity: 0;     width: 67px;
    height: 74px;}


.qrcode.show {
  
  opacity: 1; 
}

.sharelink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  color: #fff;
  width: 70%;
  margin: 50px 0 0 27%;
  position:relative;
}

.sharelink p{font-size: 12px; line-height: 1.5;}

.icon-wrapper {
  text-align: center;
  text-decoration: none; 
  color: inherit; 
}


.icon-wrapper span {
  font-size: 0.16rem;
  margin-bottom: 10px;
  display: block;
}

/* 鼠标悬停效果，可根据需要自定义 */
.icon-wrapper:hover {
  opacity: 0.8;
}

@media (max-width: 1440px) {

	.joins h3 span{ font-size: 20px; }
	.joins h3 i{ font-size: 20px; }
	.joins .fills dt { width: 30%; }
	.joins .fills dd { width: 70%; }
	.joinmain { padding: 80px 0; }
	.sharelink {width: 60%;}


@media (max-width: 1023px) {
.joinmain { padding: 1rem 0; }
.joins{ flex-direction: column;}
.joins .info{ width:100%; }
.joins h3{ padding: 0.4rem 5% 0.8rem; line-height: 0.44rem; }
.joins h3 span{ font-size:0.26rem; letter-spacing:-0.01rem; }
.joins h3 i{ font-size: 0.25rem; font-weight:500;}
.joins .form h3{ margin-right:0.3rem; }
.joins .libs {margin-bottom:0.8rem;}
.joins .libs p{ padding:0.05rem 5%;     align-items: flex-start;}

.joins .libs p i{ font-size: 0.32rem; margin-right:13%; }
.joins .libs p span{ font-size: 0.24rem;  }
.joins .libs p .code{ width: 2rem; margin-top:0.1rem; }
.joins .libs p .jt{ right: 5%; bottom: 0.25rem; width: 0.4rem; }
.joins .form{ width: 100%; padding: 0; border: none;}
.joins .form:after{ display: block; width: 1px; right: 5%; }
.joins .fills{ width: 80%; max-width: 840px; }
.joins .fills dl{ width: 100%; float: none; margin-bottom: 0.25rem; display:block; }
.joins .fills dt{ height:0.4rem; margin-bottom: 0.1rem; width:60%;  }
.joins .fills dt span{ font-size: 0.25rem;  }
.joins .fills dt i{ font-size: 0.36rem;}
.joins .fills dt em{ font-size: 0.28rem; }
.joins .fills dd{ width:100%; border:none; }

.joins .fills dd input{ height: 0.72rem; line-height: 0.72rem; font-size: 0.28rem; }
.joins .fills dd textarea{ height: 1.6rem; line-height: 0.4rem; font-size: 0.28rem;  }
.joins .fills dl:nth-child(2n){ float: none; }

.joins .send{ width: 80%; height: 0.7rem; line-height: 0.54rem; margin:0.5rem auto 0.9rem; border-radius: 0.64rem; }
.joins .send span{ font-size: 0.28rem; }
.joins .send i{ font-size: 0.26rem; }
.sloganw { padding: 1.3rem 5% ; font-size: 0.26rem; font-size: 0.18rem;}

.sharelink {width: 94%;margin: 0 auto;}

.icon-wrapper span { font-size: 0.6rem; }
.sharelink p { font-size: 0.2rem; }
.qrcode { top:90%;left: 8%; }
.qrcode img { width: 1rem; height: 1.1rem; }
}