body{
  background: #f5f8fa;
}
.pic{
  width: 100%;
  height: 550px;
}
.pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-products{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -50px;
  height: 100px;
  padding: 0 46px;
  box-sizing: border-box;
  box-shadow:0px 0px 12px 0px rgba(21,6,10,0.1);
  background: #fff;
}
.about-products h4{
  font-size: 24px;
  margin-bottom: 12px;
  font-weight: 400;
}
.about-products span{
  font-size: 16px;
  text-transform: uppercase;
  color: #888;
}

.min-nav{
  display: flex;
  align-items: center;
  padding: 36px 0;
  font-size: 14px;
  color: #888;
}
.min-nav i{
  margin: 0 2px;
}

.recruitment{
  
}
.recruitment>h4, .surroundings h4{
  margin: 59px 0 37px;
  font-size: 24px;
  text-align: center;
  font-weight: 400;
}

.recruitment .btn-group, .surroundings .btn-group{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 38px;
}
.btn-group a{
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  font-size: 18px;
  transition: .3s;
  background: #fff;
}
.btn-group a:not(:last-child){
  margin-right: 20px;
}
.surroundings .btn-group a.active,.recruitment .btn-group a.active{
  background: #25cad3;
  color: #fff;
}

.post-list{
  width: 100%;
  font-size: 0;
}
.post-list li{
  display: inline-block;
  width: 460px;
  height: 170px;
  border-radius: 2px;
  padding: 28px;
  margin-bottom: 10px;
  box-sizing: border-box;
  background: #fff;
}
.post-list li:not(:nth-of-type(3n)){
  margin-right: 10px;
}
.post-list li:hover{
  background: #f5feff;
}
.post-list li a{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.post-list li h4{
  font-size: 18px;
  color: #565656;
}
.post-list li p{
  font-size: 14px;
  color: #888888;
}
.post-list li .info span{
  position: relative;
  margin-right: 40px;
}
.post-list li .info span:first-child::after{
  position: absolute;
  top: 50%;
  left: calc(100% + 20px);
  transform: translateY(-50%);
  content: '';
  width: 1px;
  height: 20px;
  background: #E5E5E5;
}
.post-list .more{
  display: flex;
  align-items: center;
}

.see-more{
  text-align: center;
}
.see-more a{
  display: inline-block;
  width: 155px;
  height: 45px;
  line-height: 45px;
  margin-top: 34px;
  margin-bottom: 54px;
  text-align: center;
  font-size: 16px;
  border-radius: 2px;
  transition: .3s;
  background: #25CAD3;
  color: #fff;
}
.see-more a:hover{
  background: rgb(65, 213, 221);
}

.office-environment{
  overflow: hidden;
  background: #fff;
}
.surroundings .btn-group{
  flex-wrap: wrap;
}
.surroundings .btn-group a{
  width: auto;
  padding: 0 32px;
  background: #f5f8fa;
}

.surroundings-list{
  font-size: 0;
  margin-bottom: 35px;
}
.surroundings-list li{
  position: relative;
  display: inline-block;
  margin-bottom: 40px;
  cursor: pointer;
  overflow: hidden;
}
.surroundings-list li:not(:nth-of-type(3n)){
  margin-right: 40px;
}
.surroundings-list img{
  width: 440px;
  height: 250px;
  object-fit: cover;
  transition: .3s;
}
.surroundings-list img:hover{
  transform: scale(1.2);
}
.surroundings-list li div{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

.viewer-title{
  display: none;
}