@media screen and (max-height: 650px) {
  .section1 .containter .box-border {
    margin-top: 80px !important; }
  .section1 .containter .desc {
    margin: 30px auto 0 auto !important; } }

.page {
  width: 100%; }

.page .section1 {
  background: url("./../img/contact/bg1.png") 100% 100% no-repeat; }

.page .section1 .containter .box-border {
  margin: auto;
  width: 223px;
  height: 337px;
  border: solid 18px #ffffff;
  opacity: 0.7;
  position: relative; }

.page .section1 .containter .box-border .text {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 55%;
  width: 57px;
  height: 237px;
  font-family: PingFang-SC-Bold;
  font-size: 45px;
  color: #ffffff; }

.page .section1 .containter .desc {
  margin: 60px auto 0 auto;
  width: 396px;
  height: 45px;
  font-family: PingFang-SC-Bold;
  font-size: 60px;
  color: #ffffff; }

.page .section2 {
  text-align: center; }

.page .section2 .contact-list .contact-item {
  display: inline-block;
  vertical-align: middle;
  padding: 40px 20px;
  width: 255px;
  height: 360px; }

.page .section2 .contact-list .contact-item .image {
  margin: 0 auto;
  text-align: center;
  width: 140px;
  height: 170px;
  background-size: 100% 100%;
  background-position: center; }

.page .section2 .contact-list .contact-item .image.p1-image {
  background-image: url("./../img/contact/p1.png"); }

.page .section2 .contact-list .contact-item .image.p2-image {
  background-image: url("./../img/contact/p2.png"); }

.page .section2 .contact-list .contact-item .image.p3-image {
  background-image: url("./../img/contact/p3.png"); }

.page .section2 .contact-list .contact-item:nth-child(2) {
  margin: 0 50px; }

.page .section2 .contact-list .contact-item .desc {
  margin: 25px 0;
  height: 20px;
  font-family: PingFang-SC-Medium;
  font-size: 18px; }

.page .section2 .contact-list .contact-item:hover {
  color: #ffffff;
  background-color: #0e829f; }

.page .section2 .contact-list .contact-item:hover .image.p1-image {
  background-image: url("./../img/contact/p1-active.png");
  cursor: pointer; }

.page .section2 .contact-list .contact-item:hover .image.p2-image {
  background-image: url("./../img/contact/p2-active.png"); }

.page .section2 .contact-list .contact-item:hover .image.p3-image {
  background-image: url("./../img/contact/p3-active.png");
  cursor: pointer; }