body {
  font: normal 100% Helvetica, Arial, sans-serif;
}
div {
  margin: 0px;
  padding: 0px;
}
.image-content {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.company-view-details {
  position: absolute;
  right: 4%;
  top: 100px;
  width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 3px solid #000000;
  font-size: 18px;
  color: #010000;
  letter-spacing: 0;
}
.company-view-details:hover {
  background: #ffcc33;
  border: 0px solid #ffcc33;
}
.check-details {
  width: 100%;
  display: inline-block;
  height: 40px;
  margin-top: 15px;
  margin-bottom: 12px;
  line-height: 40px;
  /* margin: 15px 10px 12px 10px; */
  font-size: 14px;
  color: #010000;
  text-align: center;
  border: 1px solid #cacaca;
}
.container-list-item {
  background: #ffffff;
  /* box-shadow: 0 2px 8px 0 rgba(0,0,0,0.13);   */
}

.page-title {
  font-family: "PingFangSC-Regular";
  font-size: 4.17rem;
  color: #000000;
  letter-spacing: 0;
  display: inline-block;
  vertical-align: middle;
  width: 20%;
}
.page-content {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #d9d9d9;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  width: 80%;
  font-family: "PingFangSC-Regular";
  font-size: 2rem;
  color: #000000;
  letter-spacing: 0;
  line-height: 3rem;
  padding-left: 4%;
}
.page-head {
  width: 80%;
  margin: auto;
  padding: 85px 0px;
}



/* 闇€瑕佸姩鎬佸鐞嗙殑css */

/* 720鍒嗚鲸鐜囷紙澶т簬480px锛屽皬浜�767px锛� */
@media screen and (max-width: 767px) {
  .container-list {
    width: 100%;
  }
  .company-view {
    display: inline-block;
    width: 100%;
    padding: 30px 10px;
    padding-bottom: 35px;
  }
  .company-item-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .company-item-content {
    margin-top: 12px;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
  }
  .container-top {
    margin-top: 30px;
  }
  .introduce-item-title {
    font-size: 28px;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .page-content-title {
    font-family: "PingFangSC-Regular";
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
  }
  .bottom-view-title {
    font-family: "PingFangSC-Semibold";
    font-size: 32px;
    color: #ffffff;
    letter-spacing: 2.84px;
    text-align: center;
    line-height: 40px;
  }

  .bottom-btn {
    width: 80px;
    height: 30px;
    margin: auto;
    margin-top: 24px;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
  }
  .bottom-btn p {
    font-family: "PingFangSC-Semibold";
    font-size: 12px;
    color: #010000;
    line-height: 30px;
    letter-spacing: 0.5px;
    text-align: center;
  }

  .container-content {
    padding: 0px 1.25rem ;
    word-spacing: -5px;
    margin: auto;
    display: block;
  }
  .container-content-left {
    width: 52.58rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6.02rem;
  }
  .container-content-right {
    width: 83.33rem;
    display: inline-block;
    vertical-align: middle;
  }
  .container-content-left-top-image {
    width: 100%;
    margin-bottom: 15px;
   
  }
  .container-content-left-bottom-image {
    width: 100%;
 
  }
  .container-content-title {
    font-family: "PingFangSC-Semibold";
    font-size: 15px;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
  }

  .maintenance-top {
    /* padding-top: 2.08rem; */
    /* padding-bottom: 1.25rem; */
    background: #f6f6f6;
    width: 100%;
    word-spacing: -5px;
  }

  .maintenance {
    /* margin-top: 15px; */
    margin-bottom: 15px;
    width: 100%;
  }
  .maintenance-p {
    font-family: "PingFangSC-Light";
font-size: 14px;
color: #333333;
letter-spacing: 0;
line-height: 22px;
  }
  .footer-container {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.11);
  }
  .line-spacing {
    margin-top: 1.25rem;
  }
}
/* 880鍒嗚鲸鐜囷紙澶т簬768px锛屽皬浜�959px锛� */
@media screen and (min-width: 768px) and (max-width: 959px) {
  .container-list {
    width: 80%;
  }
  .company-view {
    display: inline-block;
    width: 80%;
    padding: 0px 1.25rem;
    padding-bottom: 60px;
  }
  .company-item-title {
    text-align: center;
  }
  .container-top {
    margin-top: 9.17rem;
  }
  .introduce-item-title {
    font-size: 70px;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .page-content-title {
    font-family: "PingFangSC-Regular";
    font-size: 24px;
    color: #000000;
    letter-spacing: 0;
    line-height: 36px;
  }
  .bottom-view-title {
    font-family: "PingFangSC-Semibold";
    font-size: 6.67rem;
    color: #ffffff;
    letter-spacing: 7.11px;
    text-align: center;
    line-height: 8.33rem;
  }

  .bottom-btn {
    width: 16.67rem;
    height: 5rem;
    margin: auto;
    margin-top: 9.17rem;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
    line-height: 5rem;
  }
  .bottom-btn p {
    font-family: "PingFangSC-Semibold";
    font-size: 2rem;
    color: #010000;
    letter-spacing: 1px;
    text-align: center;
  }
  .container-content {
    width: 141.74rem;
    margin: auto;
    word-spacing: -5px;
    margin: auto;
    display: block;
  }
  .container-content-left {
    width: 52.58rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5.83rem;
  }
  .container-content-right {
    width: 83.33rem;
    display: inline-block;
    vertical-align: middle;
  }
  .container-content-left-top-image {
    width: 100%;
    margin-bottom: 0.92rem;
    height: 22.21rem;
    
  }
  .container-content-left-bottom-image {
    width: 100%;
   
  }
  .container-content-title {
    font-family: "PingFangSC-Semibold";
    font-size:  2.5rem;
    color: #000000;
    letter-spacing: 0;
    line-height:  2.83rem;
  }

  .maintenance-top {
    padding-top: 8.33rem;
    padding-bottom: 8.58rem;
    background: #f6f6f6;
    margin: auto;
    word-spacing: -5px;
    
  }
  .maintenance {
    padding-top: 8.33rem;
    padding-bottom: 8.58rem;
    margin: auto;

  }
  .maintenance-p {
    font-family: "PingFangSC-Regular";
    font-size: 2rem;
    color: #151515;
    letter-spacing: 0;
    line-height: 2.83rem;

 
  }
  .line-spacing {
    margin-top: 3.22rem;
  }
  .footer-container {
    width: 100%;
    margin-top: 60px;
    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.11);
  }
}

/* 1100鍒嗚鲸鐜囷紙澶т簬960px锛屽皬浜�1199px锛� */
@media screen and (min-width: 960px) and (max-width: 1199px) {
  .container-list {
    width: 80%;
  }
  .company-view {
    display: inline-block;
    width: 80%;
    padding: 0px 4%;
    padding-bottom: 60px;
  }
  .company-item-title {
    text-align: center;
  }
  .container-top {
    margin-top: 9.17rem;
  }
  .introduce-item-title {
    font-size: 70px;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .page-content-title {
    font-family: "PingFangSC-Regular";
    font-size: 24px;
    color: #000000;
    letter-spacing: 0;
    line-height: 36px;
  }
  .bottom-view-title {
    font-family: "PingFangSC-Semibold";
    font-size: 6.67rem;
    color: #ffffff;
    letter-spacing: 7.11px;
    text-align: center;
    line-height: 8.33rem;
  }

  .bottom-btn {
    width: 16.67rem;
    height: 5rem;
    margin: auto;
    margin-top: 9.17rem;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
    line-height: 5rem;
  }
  .bottom-btn p {
    font-family: "PingFangSC-Semibold";
    font-size: 2rem;
    color: #010000;
    letter-spacing: 1px;
    text-align: center;
  }
  .container-content {
    width: 141.74rem;
    margin: auto;
    word-spacing: -5px;
    margin: auto;
    display: block;
  }
  .container-content-left {
    width: 52.58rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5.83rem;
  }
  .container-content-right {
    width: 83.33rem;
    display: inline-block;
    vertical-align: middle;
  }
  .container-content-left-top-image {
    width: 100%;
    margin-bottom: 0.92rem;
    height: 22.21rem;
    
  }
  .container-content-left-bottom-image {
    width: 100%;
   
  }
  .container-content-title {
    font-family: "PingFangSC-Semibold";
    font-size:  2.5rem;
    color: #000000;
    letter-spacing: 0;
    line-height:  2.83rem;
  }

  .maintenance-top {
    padding-top: 8.33rem;
    padding-bottom: 8.58rem;
    background: #f6f6f6;
    margin: auto;
    word-spacing: -5px;
    
  }
  .maintenance {
    padding-top: 8.33rem;
    padding-bottom: 8.58rem;
    margin: auto;

  }
  .maintenance-p {
    font-family: "PingFangSC-Regular";
    font-size: 2rem;
    color: #151515;
    letter-spacing: 0;
    line-height: 2.83rem;
   
  }
  .line-spacing {
    margin-top: 3.22rem;
  }
  .footer-container {
    width: 100%;
    margin-top: 60px;
    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.11);
  }
}
/* 瓒呭ぇ灞� */
@media screen and (min-width: 1200px) {
  .container-list {
    width: 80%;
  }
  .company-view {
    display: inline-block;
    width: 80%;
    padding: 0px 4%;
    padding-bottom: 60px;
  }
  .company-item-title {
    text-align: center;
  }
  .container-top {
    margin-top: 9.17rem;
  }
  .introduce-item-title {
    font-size: 70px;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .page-content-title {
    font-family: "PingFangSC-Regular";
    font-size: 24px;
    color: #000000;
    letter-spacing: 0;
    line-height: 36px;
  }
  .bottom-view-title {
    font-family: "PingFangSC-Semibold";
    font-size: 6.67rem;
    color: #ffffff;
    letter-spacing: 7.11px;
    text-align: center;
    line-height: 8.33rem;
  }

  .bottom-btn {
    width: 16.67rem;
    height: 5rem;
    margin: auto;
    margin-top: 9.17rem;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
    line-height: 5rem;
  }
  .bottom-btn p {
    font-family: "PingFangSC-Semibold";
    font-size: 2rem;
    color: #010000;
    letter-spacing: 1px;
    text-align: center;
  }
  .container-content {
    width: 141.74rem;
    margin: auto;
    word-spacing: -5px;
    margin: auto;
    display: block;
  }
  .container-content-left {
    width: 52.58rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5.83rem;
  }
  .container-content-right {
    width: 83.33rem;
    display: inline-block;
    vertical-align: middle;
  }
  .container-content-left-top-image {
    width: 100%;
    margin-bottom: 0.92rem;
    height: 22.21rem;
    
  }
  .container-content-left-bottom-image {
    width: 100%;
   
  }
  .container-content-title {
    font-family: "PingFangSC-Semibold";
    font-size:  2.5rem;
    color: #000000;
    letter-spacing: 0;
    line-height:  2.83rem;
  }

  .maintenance-top {
    padding-top: 8.33rem;
    padding-bottom: 8.58rem;
    background: #f6f6f6;
    margin: auto;
    word-spacing: -5px;
    
  }
  .maintenance {
    padding-top: 8.33rem;
    padding-bottom: 8.58rem;
    margin: auto;

  }
  .maintenance-p {
    font-family: "PingFangSC-Regular";
    font-size: 2rem;
    color: #151515;
    letter-spacing: 0;
    line-height: 2.83rem;
  
 
  }
  .line-spacing {
    margin-top: 3.22rem;
  }
  .footer-container {
    width: 100%;
    margin-top: 60px;
    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.11);
  }
}

.introduces {
  overflow: hidden;
  position: relative;
  text-align: center;
  vertical-align: middle;
  margin-top: 20px;
}
.introduce-item {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  transition: all 0.6s;
}
.introduce-item:hover {
  transform: scale(1.2);
}



.bottom-view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.bottom-btn:hover {
  background: #ffcc33;
}


p {
  margin: 0px;
}