.modal, .header .search-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(33, 33, 33, 0.8);
  z-index: 9999;
  display: none;
  overflow-y: scroll; }
  .modal::-webkit-scrollbar, .header .search-box::-webkit-scrollbar {
    display: none; }
  .modal .modal-container, .header .search-box .modal-container {
    position: absolute;
    width: 100%;
    height: 100%; }
    .modal .modal-container .content, .header .search-box .modal-container .content {
      background: #ffffff;
      max-width: 74rem;
      position: relative;
      margin: 0 auto;
      padding: 1.8rem 3.2rem 6.4rem 3.2rem; }
      @media screen and (min-width: 768px) {
        .modal .modal-container .content, .header .search-box .modal-container .content {
          padding: 4.8rem;
          margin: 5.4rem auto; 
		  border-radius: 1.5rem;
		  } }
      .modal .modal-container .content .close, .header .search-box .modal-container .content .close {
        position: absolute;
        top: 1.6rem;
        right: 1.6rem;
        width: 1.6rem;
        height: 1.6rem;
        background: transparent url("img/icon/close.svg") 50% 50% no-repeat;
        background-size: cover;
        cursor: pointer;
        z-index: 99999;
        color: #ffffff; 
		
		}
      .modal .modal-container .content .top, .header .search-box .modal-container .content .top {
        padding-bottom: .6rem;
        position: relative; }
        .modal .modal-container .content .top .title, .header .search-box .modal-container .content .top .title {
          font: 300 3.6rem/4.8rem "Work Sans", sans-serif; }
      .modal .modal-container .content .text, .header .search-box .modal-container .content .text {
        margin-top: 2.4rem;
        font: 300 1.6rem/2.8rem "Work Sans", sans-serif; }
      .modal .modal-container .content .form, .header .search-box .modal-container .content .form {
        margin-top: 3.6rem; }
.section33 .join {
    border-radius: 2rem;
    background-color: #fff;
    box-shadow: 0 10px 30px #00000014;
    padding: 35px;
    width: 1100px;
    position: relative;
	margin-top:30px;
}
@media only screen and (max-width: 1024px){
.section33 .join {
    width: 50vw;
    padding: 3vw;
}
}
@media only screen and (max-width: 768px){
.section33 .join{
    width: 92%;
    padding: 5vw;
    margin-top: 5vw;
}
.section33 .join .title{font-size:1.2rem;}
.join-page{margin-top:2rem;}
}
@media only screen and (max-width: 640px){
.section33 .join {
    padding: 24px 16px;
}
}
.section33 .page-title {
    font-size: var(--font-title-size);
    color: var(--color-title1);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: var(--magrin-top);
}
.section33 .page-title .cn {font-size:1.8rem;margin-top:8px;font-weight:600}
.section33 .page-title .en {font-size:.8rem;margin-top:8px;font-weight:400}
.section33 .join .title {font-weight:600;font-size:30px;line-height:1.5;letter-spacing:1px;color:#000}
.section33 .join .fb {margin-top:1rem;display:flex;align-items:center;justify-content:space-between}
@media only screen and (max-width: 768px){
.section33 .join .title{font-size: 1.3rem;
    text-align: center;}
}
@media only screen and (max-width:768px) {.section33 .join .fb {margin-top:4vw}
.aspect-box>.img-box{text-align:center;margin-top:2rem;}
}
@media only screen and (max-width:640px) {.section33 .join .fb {display:block;margin-top:20px}
}
.section33 .join .fb .form {width:36rem}
@section33 only screen and (max-width:1024px) {.section33 .join .fb .form {width:25vw}
}
@media only screen and (max-width:768px) {.section33 .join .fb .form {width:50vw}
}
@media only screen and (max-width:640px) {.section33 .join .fb .form {width:100%}
}
.section33 .join .fb .form .item label {display:block;margin-bottom:1.4rem;color:#111}
@media only screen and (max-width:640px) {.section33 .join .fb .form .item label {margin-bottom:8px}
}
.section33 .join .fb .form .item input {height:50px;border:1px solid #D8D8D8;border-radius:10px;display:block;width:100%;padding:0 16px}
@media only screen and (max-width:1536px) {.section33 .join .fb .form .item input {height:44px}
}
.section33 .join .fb .form .item input:focus {border-color:#00c766}
@media only screen and (max-width:640px) {
.section33 .join .fb .form .item{height: auto;padding: 0;}
.section33 .join .fb .form .item input {height:40px;padding:0 12px;border-radius:8px;width: 93%;}
.aspect-box>.img-box>img{width:80%}
}
.section33 .join .fb .form .item+.item {margin-top:2rem}
@media only screen and (max-width:640px) {.section33 .join .fb .form .item+.item {margin-top:20px}
}
.section33 .join .fb .form .tip {color:#00c766;margin-top:1.5rem;font-size:14px}
@media only screen and (max-width:640px) {.section33 .join .fb .form .tip {font-size:12px;margin-top:20px}
}
.section33 .join .fb .form button {width:28rem;height:3.9rem;background:#2A885A;color:#fff;border-radius:10px;font-size:2rem;margin-top:2rem;cursor:pointer;border: none;}
@media only screen and (max-width:1024px) {.section33 .join .fb .form button {height:40px;font-size:15px;margin-top:20px}
}
@media only screen and (max-width:640px) {.section33 .join .fb .form button {width:100%;border-radius:8px;font-size:14px}
}
.section33 .join .fb .code {text-align:center}
@media only screen and (max-width:640px) {.section33 .join .fb .code {display:flex;flex-direction:column;align-items:center;margin-top:24px}
}
.section33 .join .fb .code img {width:22rem}
@media only screen and (max-width:768px) {.section33 .join .fb .code img {width:20vw}
}
@media only screen and (max-width:640px) {.section33 .join .fb .code img {width:40vw}
}
.section33 .join .fb .code p {color:#00c766;font-size:2rem;margin-top:1.6rem}
@media only screen and (max-width:768px) {.section33 .join .fb .code p {font-size:14px;margin-top:4px}
}		
.close-modal{position: absolute;right: 1.5rem;top: 1.5rem;}
.close-modal i{font-weight: bold;font-size: 30px;}