.contact { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 40px; }

.contact .contactHead { width: 100%; height: 2.72rem; overflow: hidden; position: relative; background: url("../../assets/image/contact.png") no-repeat center center; background-size: cover; }
/* .contact .contactHead::after { content: ''; width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0; top: 0; } */

.contact .contactHead .title {padding-left: 3.51rem; width: 50%; height: 1.92rem; position: absolute; top: 0px; left: 0; display: flex; flex-direction: column; justify-content: center; z-index: 9;background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%); padding-top: .8rem;}

.contact .contactHead .title .zh { font-family: Alibaba PuHuiTi 2.0; font-size: .4rem; font-weight: 500; line-height: normal; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #FFFFFF; }

.contact .contactHead .title .en { margin-top: .08rem; font-family: DingTalk JinBuTi; font-size: .2rem; font-weight: normal; line-height: normal; text-transform: uppercase; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: rgba(255, 255, 255, 0.4); }

.contact .content { width: 1200px; }

.contact .content .breadcrumbs { margin: 40px 0; }

.contact .content .map { width: 100%; height: 800px; position: relative; }

.contact .content .map .how { width: 100%; height: 136px; position: absolute; left: 0; bottom: 0;  display: flex; align-items: center; justify-content: center; z-index: 161; }

.contact .content .map .how .map_bg { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(50px); z-index: 1; }

.contact .content .map .how .title { width: 301px; height: 136px; opacity: 1; position: relative; margin-right: 40px; z-index: 9; }

.contact .content .map .how .title img { width: 100%; height: 100%; }

.contact .content .map .how .title p { white-space: nowrap; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Alibaba PuHuiTi 2.0; font-size: 32px; font-weight: bold; line-height: normal; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #FFFFFF; }

.contact .content .map .how .address { position: relative; flex: 1; height: 100%; display: flex; align-items: center; z-index: 9; }

.contact .content .map .how .address .one { margin-bottom: 8px; font-family: Alibaba PuHuiTi 2.0; font-size: 18px; font-weight: normal; line-height: 24px; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #333333; }

.contact .content .map .how .address .left { margin-right: 86px; }

.contact .content .media { width: 100%; display: flex;  background: #fff; box-sizing: border-box;margin-top: 80px; }

.contact .content .media .newsBox { width: 1200px; height: 100%; }

.contact .content .media .newsBox .title .en { height: 24px; opacity: 1; font-family: DingTalk JinBuTi; font-size: 20px; font-weight: normal; line-height: normal; text-transform: uppercase; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #CCCCCC; }

.contact .content .media .newsBox .title .name { width: 100%; height: 45px; display: flex; align-items: center; justify-content: space-between; }

.contact .content .media .newsBox .title .name .left { height: 45px; opacity: 1; font-family: Alibaba PuHuiTi 2.0; font-size: 32px; font-weight: 500; line-height: normal; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #000; }

.contact .content .media .newsBox .title .name .right { height: 40px; display: flex; align-items: center; }

.contact .content .media .newsBox .title .name .right div { box-sizing: border-box; border: 1px solid #D8D8D8; padding: 0 24px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 24px; opacity: 1; font-family: Alibaba PuHuiTi 2.0; font-size: 18px; font-weight: normal; line-height: 24px; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #000; cursor: pointer; }

.contact .content .media .newsBox .infos { width: 100%; display: flex; justify-content: space-between; }

.contact .content .media .newsBox .infos .info { width: 220px; height: 340px; position: relative; overflow: hidden; cursor: pointer; }

.contact .content .media .newsBox .infos .info:hover .show2 { top: 0; transition: .5s linear; }

.contact .content .media .newsBox .infos .info:hover .show2 .joinUs { opacity: 1; transition: 1.5s linear; }

.contact .content .media .newsBox .infos .info .show1 { width: 100%; height: 296px; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; align-items: center; border: 1px solid #D8D8D8; border-top: 4px solid #D3192B; }

.contact .content .media .newsBox .infos .info .show1 .img { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; }

.contact .content .media .newsBox .infos .info .show1 .img img { width: 109.45px; height: 109.45px; opacity: 1; margin-top: 40px; }

.contact .content .media .newsBox .infos .info .show1 .name { height: 24px; opacity: 1; font-family: Alibaba PuHuiTi 2.0; font-size: 18px; font-weight: 500; line-height: 24px; text-align: center; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #333333; margin: 24px 0 8px; }

.contact .content .media .newsBox .infos .info .show1 .en { height: 24px; opacity: 1; font-family: DingTalk JinBuTi; font-size: 18px; font-weight: normal; line-height: 24px; text-align: center; text-transform: uppercase; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #CCCCCC; }

.contact .content .media .newsBox .infos .info .show2 { width: 100%; height: 340px; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; align-items: center; border: 1px solid #D8D8D8; border-top: 4px solid #D3192B; position: absolute; left: 0; top: -620px; background-color: #D3192B; }

.contact .content .media .newsBox .infos .info .show2 .img { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; margin-top: 40px; margin-bottom: 36px; }

.contact .content .media .newsBox .infos .info .show2 .img img { width: 100%; height: 100%; opacity: 1; }

.contact .content .media .newsBox .infos .info .show2 .name { height: 24px; opacity: 1; font-family: Alibaba PuHuiTi 2.0; font-size: 18px; font-weight: 500; line-height: 24px; text-align: center; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #fff; margin: 24px 0 8px; }

.contact .content .media .newsBox .infos .info .show2 .en { height: 24px; opacity: 1; font-family: DingTalk JinBuTi; font-size: 18px; font-weight: normal; line-height: 24px; text-align: center; text-transform: uppercase; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: rgba(255, 255, 255, 0.4); }

.contact .content .media .newsBox .infos .info .show2 .joinUs { font-family: Alibaba PuHuiTi 2.0; font-size: 18px; font-weight: normal; line-height: 24px; text-align: center; letter-spacing: 0em; opacity: 0; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #FFFFFF; }

@media (max-width: 750px) { .contact { transform: none; padding-bottom: 20px; }
  .contact .contactHead { box-sizing: border-box; padding-left: 20px;height: 2rem; }
  .contact .contactHead .title { height: 100%;top: 0;padding-left: 0.24rem; padding-top: 0rem; box-sizing: border-box;}
  .contact .contactHead .title .zh{ font-size: 25px;}
  .contact .contactHead .title .en{ font-size: 16px;}
  .contact .content { width: 100%; }
  .contact .content .breadcrumbs {padding: 0 .24rem;box-sizing: border-box; margin: .4rem 0; }
  .contact .content .map { width: 94%; height: 50vh; margin: 0 .24rem; position: relative; }
  .contact .content .map .how { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 161; }
  .contact .content .map .how .title { width: 1.7rem; height: 1.7rem; position: relative; margin-right: 0; }
  .contact .content .map .how .title img { width: 100%; }
  .contact .content .map .how .title p { white-space: nowrap; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Alibaba PuHuiTi 2.0; font-size: .2rem; font-weight: bold; line-height: normal; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #FFFFFF; }
  .contact .content .map .how .address { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  .contact .content .map .how .address .one { margin-bottom: 4px; font-family: Alibaba PuHuiTi 2.0; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0em; font-variation-settings: "opsz" auto; font-feature-settings: "kern" on; color: #333333; }
  .contact .content .map .how .address .left { margin-right: 0; display: flex; flex-direction: column; }
  .contact .content .map .how .address .right { margin: 0; display: flex; flex-direction: column; }
  .contact .content .details .left { display: none; }
  .contact .content .media { width: 100%; height: auto; padding: 0 .24rem; margin-top: .4rem; }
  .contact .content .media .newsBox { width: 100%; height: 100%; }
  .contact .content .media .newsBox .infos { width: 100%; display: flex; flex-wrap: wrap; }
  .contact .content .media .newsBox .infos .info { width: 46%; height: 4.3rem;margin:5px; } 
  .contact .content .media .newsBox .infos .info:hover { width: 46%; height: 5rem;margin:5px; } 
  .contact .content .media .newsBox .infos .info .show1 { height: 4rem }
  .contact .content .media .newsBox .infos .info .show1 .name { margin: .2rem 0 0; font-size: .36rem; }
  .contact .content .media .newsBox .infos .info .show1 .en { font-size: .25rem; }
  .contact .content .media .newsBox .infos .info .show1 .img img { margin-top: 0; width: 1.8rem; height: 1.8rem; }
  .contact .content .media .newsBox .infos .info .show2 { height: 5rem; }
  .contact .content .media .newsBox .infos .info .show2 .name { margin: .2rem 0 0; font-size: .36rem; }
  .contact .content .media .newsBox .infos .info .show2 .en { font-size: .25rem; }
  .contact .content .media .newsBox .infos .info .show2 .img { margin: .24rem 0; width: 2rem; height: 2rem; }
  .contact .content .media .newsBox .infos .info:hover .show2 .joinUs { font-size: .36rem; }
 }