.join-en{
  color: rgba(35,24,21,.5);
  line-height: 1.7;
  text-align: center;
}
.join-bt{
  color: #231815;
  letter-spacing: 10px;
  text-align: center;
}
.join-ms{
  color:#231815;
  line-height: 1.8;
  text-align: center;
}
.section1{
  width: 100%;
  position: relative;
  overflow: hidden;
}
.section1 .join-en{
  color: #fff;
}
.section1 .join-bt{
  color: #fff;
}
.section1 .join-ms{
  color: #fff;
}
.section1 > img{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section1 .wrap{
  position: relative;
}
.section2{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #f5f5f5;
}
.section2 .train-left{
  width: 50%;
  padding-left: 6%;
  padding-right: 6%;
}
.section2 .train-left .join-en{
  text-align: left;
}
.section2 .train-left .join-bt{
  text-align: left;
}
.section2 .train-left h5{
  color: #231815;
  line-height: 1.4;
}
.section2 .train-left p{
  color: #231815;
  line-height: 1.6;
}
.section2 .train-right{
  width: 50%;
  overflow: hidden;
}
.section2 .train-right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:all .5s ease;
}
.section2 .train-right img:hover{
  transform: scale(1.05);
}
.section3 .join-tj{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.section3 .join-tj .tj-item{
  width: calc((100% - 15px) / 2);
  margin-right: 15px;
  background: #fff;
  box-shadow:0 5px 20px rgba(0, 16, 39, .1);
  border-radius: 10px;
  overflow: hidden;
  padding: 25px 30px 30px;
}
.section3 .join-tj .tj-item:nth-child(2n){
  margin-right: 0;
}
.section3 .join-tj .tj-item .tj-bt{
  color:#231815;
  line-height: 1.3;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.section3 .join-tj .tj-item .tj-ms{
  color: #231815;
  line-height: 1.8;
}
.section3 .join-fl{
  width: 100%;
  display: flex;
  flex-wrap:wrap;
}
.section3 .join-fl .fl-item{
  width: calc((100% - 45px) / 4);
  margin-right: 15px;
  margin-bottom: 15px;
  background: #fff;
  border-radius: 10px;
  padding: 25px 30px;
  box-shadow:0 5px 20px rgba(0, 16, 39, .1);
  transition: all .5s ease;
  background-size: cover!important;
}
.section3 .join-fl .fl-item:hover{
  background:var(--color) url(../img/join/fl-hover.png) no-repeat bottom right;
}
.section3 .join-fl .fl-item:nth-child(4n){
  margin-right: 0;
}
.section3 .join-fl .fl-item .fl-bt{
  color: #231815;
  line-height: 1.3;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  transition: all .5s ease;
  position: relative;
}
.section3 .join-fl .fl-item .fl-bt:before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,.1);
  transition: all .8s ease;
}
.section3 .join-fl .fl-item:hover .fl-bt{
  color: #fff;
  border-color: transparent;
}
.section3 .join-fl .fl-item:hover .fl-bt:before{
  width: 100%;
}
.section3 .join-fl .fl-item .fl-ms{
  color: #231815;
  line-height: 1.5;
  transition: all .5s ease;
}
.section3 .join-fl .fl-item:hover .fl-ms{
  color: #fff;
}
.section4 .plan{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.section4 .plan .plan-cate{
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  width: calc((100% - 45px) / 4);
  height: 180px;
  margin-right: 15px;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 10px;
  background: url(../img/join/plan-bg.png) no-repeat bottom right;
  box-shadow: 0 5px 20px rgba(0, 16, 39, .1);
  background-size: cover!important;
}
.section4 .plan .plan-cate:nth-child(4n){
  margin-right: 0;
}
.section4 .plan .plan-cate .plan-icon{
  width: 5vw;
  height: 5vw;
  min-width: 40px;
  min-height: 40px;
  max-width: 90px;
  max-height: 90px;
  overflow: hidden;
  transition: all .5s ease;
  position: absolute;
  left: 10%;
  top:50%;
  transform: translateY(-50%);
}
.section4 .plan .plan-cate .plan-icon img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.section4 .plan .plan-cate .paln-txt{
  width: calc(80% - 90px);
  text-align: center;
  transition: all .5s ease;
  position: absolute;
  right:10%;
  top:50%;
  transform: translateY(-50%);
}
.section4 .plan .plan-cate .paln-txt h5{
  color:#231815;
  line-height: 1;
}
.section4 .plan .plan-cate .paln-txt span{
  color:#231815;
  line-height: 1.5;
}
.section4 .plan .plan-cate:hover{
  justify-content: center;
  background: var(--color) url(../img/join/plan-hover.png) no-repeat bottom right;
}
.section4 .plan .plan-cate:hover .plan-icon{
  transform:translateY(-50%) translateX(100%);
  opacity: 0;
}
.section4 .plan .plan-cate:hover .paln-txt{
  transform: translateY(-50%) translateX(50%);
  right: 50%;
}
.section4 .plan .plan-cate:hover .paln-txt h5{
  color: #fff;
}
.section4 .plan .plan-cate:hover .paln-txt span{
  color: #fff;
}
.section5 .join-lx{
  width: 100%;
  display: flex;
  flex-wrap:wrap;
  background: url(../img/join/lx-bg.png) no-repeat center;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover!important;
}
.section5 .join-lx .lx-item{
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  position: relative;
}
.section5 .join-lx .lx-item .lx-icon{
  width: 110px;
  height: 110px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.section5 .join-lx .lx-item .lx-icon img{
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: 60%;
}
.section5 .join-lx .lx-item .lx-bt{
  color: #fff;
  line-height: 1.6;
}
.section5 .join-lx .lx-item .lx-ms{
  color: #fff;
  line-height: 1.6;
}
.section5 .join-lx .lx-item .lx-ms a{
  color: #fff;
}
.section5 .join-lx .lx-item .lx-ms a:hover{
  text-decoration: underline;
}
.section5 .join-lx .lx-item.code .code-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all .5s ease;
}
.section5 .join-lx .lx-item.code .code-box img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.section5 .join-lx .lx-item.code:hover .code-box{
  opacity: 1;
}
@media only screen and (max-width:1400px){
  .section4 .plan .plan-cate .paln-txt{
    width: calc(80% - 70px);
  }
}
@media only screen and (max-width:1200px){
  .section4 .plan .plan-cate .paln-txt h5{
    font-size: 18px;
  }
  .section5 .join-lx .lx-item .lx-icon{
    width: 90px;
    height: 90px;
  }
}
@media only screen and (max-width:1024px){
  .section4 .plan .plan-cate .paln-txt{
    width: calc(80% - 50px);
  }
  .section5 .join-lx .lx-item .lx-icon{
    width: 70px;
    height: 70px;
  }
}
@media only screen and (max-width:768px){
  .section1 .join-ms{
    text-align: left;
  }
  .section2 .train-left{
    width: 100%;
  }
  .section2 .train-left .join-en{
    text-align: center;
  }
  .section2 .train-left .join-bt{
    text-align: center;
  }
  .section2 .train-right{
    width: 100%;
  }
  .section3 .join-tj{
    margin-bottom: 0;
  }
  .section3 .join-tj .tj-item{
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .section3 .join-fl .fl-item{
    width: 100%;
    margin-right: 0;
  }
  .section4 .plan .plan-cate{
    width: calc((100% - 15px) / 2);
    height: 100px;
  }
  .section4 .plan .plan-cate:nth-child(2n){
    margin-right: 0;
  }
  .section4 .plan .plan-cate .paln-txt{
    width: calc(80% - 45px);
  }
  .section4 .plan .plan-cate .paln-txt h5{
    font-size: 14px;
  }
  .section4 .plan .plan-cate .paln-txt span{
    font-size: 12px;
  }
  .section5 .join-lx .lx-item{
    width: 100%;
  }
  .section5 .join-lx .lx-item .lx-icon{
    width: 60px;
    height: 60px;
  }
}


.section-list .list-top{
  width: 100%;
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: space-between;
}
.section-list .list-top .join-en{
  text-align: left;
}
.section-list .list-top .join-bt{
  text-align: left;
}
.list-search{
  width: 40%;
  max-width: 286px;
  height: 48px;
  border-radius: 6px;
  border: 1px solid #ddd;
  overflow: hidden;
}
.list-search .input-container {
  width: 100%;
  height: 100%;
  display: flex;
}

.list-search  input {
  border: none;
  width: calc(100% - 50px);
  padding: 0 20px;
  color: #777;
}

.list-search .search_btn {
  width: 50px;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
}

.list-search .search_btn .icon {
  fill: #000;
}
.noData{
    text-align: center;
}
.join-list .job_li{
  display: block;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 10px;
  transition: all .5s ease;
  margin-bottom: 20px;
  padding-left: 2vw;
  padding-right: 2vw;
}
.join-list .job_li .job-li-top{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.join-list .job_li .job-name{
  color: #231815;
  line-height: 1;
}
.join-list .job_li .job-time{
  color: #999;
  line-height: 1.5;
}
.join-list .job_li .job-li-bottom{
  width: 100%;
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: space-between;
}
.join-list .job_li .job-li-bottom ul{
  width: calc(100% - 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.join-list .job_li .job-li-bottom ul li{
  padding-right: 3vw;
  position: relative;
  color: #231815;
}
.join-list .job_li .job-li-bottom ul li:last-child{
  padding-right: 0;
}
.join-list .job_li .job-li-bottom ul li:not(:last-child):before{
  content: "/";
  position: absolute;
  top: 50%;
  right: 1.5vw;
  transform: translateY(-50%);
  color: #aaa;
}
.join-list .job_li .job-li-bottom ul li span{
  padding-left: 5px;
}
.join-list .job_li .job-li-bottom .job-more{
  color: #999;
  line-height: 1.5;
}
.join-list .job_li:hover{
  background: var(--color);
}
.join-list .job_li:hover .job-li-top{
  border-color:rgba(255,255,255,.1);
}
.join-list .job_li:hover *{
  color: #fff!important;
}
@media only screen and (min-width:1950px){ 
  .join-list .job_li .job-li-bottom ul li{
    padding-right:60px;
  }
}
@media only screen and (max-width:768px){ 
  .list-top-left{
    width: 100%;
  }
  .section-list .list-top .join-en{
    text-align: center;
  }
  .section-list .list-top .join-bt{
    text-align: center;
  }
  .list-search{
    width: 100%;
    max-width: 400px;
    margin: 20px auto 0;
  }
  .join-list .job_li{
    padding: 25px 20px;
  }
  .join-list .job_li .job-name{
    width: 100%;
    margin-bottom: 10px;
  }
  .join-list .job_li .job-li-bottom ul{
    width: 100%;
    margin-bottom: 15px;
  }
  .join-list .job_li .job-li-bottom ul li{
    width: 100%;
    padding-right: 0px;
    margin-bottom:5px;
  }
  .join-list .job_li .job-li-bottom ul li:not(:last-child):before{
    right: 8px;
    display: none;
  }
}

.section-xq{
  width: 100%;
  position: relative;
  background: #f5f5f5;
  margin-top:90px;
}
.section-xq .bread{
  position: static;
  transform: none;
}
.section-xq .bread .breadItem{
  color:#999;
}
.section-xq .bread .breadItem a{
  color: #999;
}
.section-xq .info-top{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
}
.section-xq .info-top .xq-name{
  color: #231815;
  line-height: 1;
}
.section-xq .info-top .xq-time{
  color: #999;
  line-height: 1.5;
}
.section-xq .xq-info > ul{
  width: 75%;
  display: flex;
  flex-wrap:wrap;
}
.section-xq .xq-info > ul li{
  width: calc(100% / 3);
  padding-right: 10px;
  color: #231815;
  line-height: 1.3;
}
.join-con .join-xq-tt{
  color: #231815;
  border-bottom: 1px solid #eee;
}
.join-con .join-intro{
  color: #231815;
  line-height:2.6;
}
.btn-box{
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    gap: 20px;
}
.join-btn{
  border-color: var(--color);
  background: var(--color);
  color: #fff;
  letter-spacing: 2px;
}
@media only screen and (max-width:1024px){ 
  .section-xq .xq-info > ul{
    width: 100%;
  }
}
@media only screen and (max-width:768px){ 
  .section-xq{
    margin-top: 50px;
  }
  .section-xq .info-top .xq-name{
    width: 100%;
    margin-bottom: 15px;
  }
  .section-xq .xq-info > ul li{
    width: calc(100% / 2);
  }
}
@media only screen and (max-width:400px){ 
  .section-xq .xq-info > ul li{
    width: 100%;
  }
  .section-xq .xq-info > ul li:last-child{
    margin-bottom: 0;
  }
}