body {
  background-color: #f5f5f5;
}

.container {
  position: relative;
  margin: 1.57rem 1.3rem;
}

.crumb {
    /*padding-left: 1.3rem;*/
    display: flex;
    align-items: center;
    color: #666;
    margin: 1.3rem 0 .7rem 0;
}

 .crumb .crumb-home {
  display: block;
  width: .2rem;
  height: .2rem;
  margin-right: .1rem;
}

 .crumb a {
  color: #666;
  font-weight: 400;
}

 .crumb a:last-child {
  color: #333;
}

 .crumb span {
  margin-left: .05rem;
  margin-right: .05rem;
}

.container .main {
  display: flex;
  gap: .6rem;
}

.container .main .info {
  width: 12.24rem;
  background: rgba(255, 255, 255, 1);
  padding: .8rem .7rem;
}

.container .main .info .title {
  /*font-size: .32rem;*/
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  font-family: 'HarmonyOS Sans SC';
  margin-bottom: .18rem;
}

.container .main .info .job_info {
  display: flex;
  align-items: center;
  gap: .14rem;
  /*font-size: .18rem;*/
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-bottom: .32rem;
}

.container .main .info .job_info .separate {
  width: 0;
  height: .12rem;
  border: .01rem solid rgba(51, 51, 51, 1);
}

.container .main .info hr {
  margin: .36rem 0 .56rem 0;
  border: .01rem solid rgba(240, 240, 240, 1);
}

.container .main .info .job_description {
  margin-bottom: .5rem;
}

.container .main .info .job_description span {
  /*font-size: .16rem;*/
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: .28rem;
  font-family: 'HarmonyOS Sans SC';
  display: block;
}

.container .main .info .job_description span:first-child {
  /*font-size: .22rem;*/
  font-weight: 500;
  color: rgba(0, 83, 231, 1);
  font-family: 'HarmonyOS Sans SC';
  margin-bottom: .3rem;
}

.container .main .info .button {
  width: 2.23rem;
  height: .46rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .61rem;
  border: .01rem solid rgba(223, 223, 223, 1);
  background: rgba(0, 83, 231, 1);
  
}

.container .main .info .button span {
  font-size: .16rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  font-family: 'HarmonyOS Sans SC';
}

.container .main .info .button span:hover {
  color: rgba(255, 255, 255, 1);
}
.container .main .info .button img {
  width: .14rem;
  height: .0986rem;
  z-index: 2;
}

.container .main .info .button  .normal {
  display: block;
}

.container .main .info .button  .active {
  display: none;
}

.container .main .info .button:hover .normal {
  display: none;
}

.container .main .info .button:hover .active {
  display: block;
}

.container .main .info .remarks {
  /*font-size: .15rem;*/
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  font-family: 'HarmonyOS Sans SC';
  margin-top: .22rem;
}
.container .main .info .remarks span {
    display: block;
    line-height: 1.5;
}

.container .main .related {
  width: 3.76rem;
  background: rgba(255, 255, 255, 1);
  padding: .3519rem 0;
  max-height: 5.55rem;
  /*overflow-y: auto;*/
  position: sticky;
  top: .7rem;
}

.container .main .related .related_label {
  /*font-size: .24rem;*/
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  font-family: 'HarmonyOS Sans SC';
  margin-bottom: .3781rem;

  width: 100%;
  border-left: .01rem solid rgba(0, 83, 231, 1);
  padding: 0 .4rem;
}

.container .main .related .related_item {
  /*font-size: .22rem;*/
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  font-family: 'HarmonyOS Sans SC';
  margin: 0 .4rem .3781rem .4rem;
  padding-bottom: .3rem;
  border-bottom: .01rem solid rgba(223, 223, 223, 1);
}

.container .main .related .related_item:last-child {
  border-style: none;
}

.container .main .related .related_item.no_bottom {
  padding-bottom: 0;
  border-bottom: 0 solid rgba(223, 223, 223, 1);
}

.container .main .related .related_item .name {
  /*font-size: .18rem;*/
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  font-family: 'HarmonyOS Sans SC';
  cursor: pointer;
}

.container .main .related .related_item .name:hover {
    color: rgba(0, 83, 231, 1);
}

.container .main .related .related_item .related_item_info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .14rem;
  /*font-size: .18rem;*/
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-top: .18rem;
}

.container .main .related .related_item .related_item_info .separate {
  width: 0;
  height: .12rem;
  border: 1px solid rgba(51, 51, 51, 1);
}

.container .main .related .back {
  background: rgba(0, 89, 255, 1);
  /*font-size: 0.16rem;*/
  font-weight: 400;
  font-family: 'HarmonyOS Sans SC', sans-serif;
  color: rgba(255, 255, 255, 1);
  /*position: absolute;*/
  bottom: 0;
  left: 0;
  cursor: pointer;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  height: .5rem;
  line-height: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .21rem;
}


@media (max-width: 767px) {
    .container {
        margin: 1.57rem .4rem;
    }
    .container .main {
        flex-direction: column;
    }
    .container .main .info {
        width: 100%;
    }
    .container .main .related {
        width: 100%;
    }
}