@font-face {
  font-family: "iconfont"; 
  src: url('../font/hexpswipericonfont.woff') format('woff'),
       url('../font/hexpswipericonfont.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-rightarrow_a:before {
  content: "\eb8d";
}

.icon-leftarrow_a:before {
  content: "\eb90";
}

.clearfix:after, .cl:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}
a{ corlor:#000}
.fl, .z {
  float: left
}
.fr, .y {
  float: right !important
}
.show {
  display: block
}
.hide {
  display: none
}
.tal {
  text-align: left !important
}
.fz12 {
  font-size: 12px !important
}
.fz14 {
  font-size: 14px !important
}
.tac {
  text-align: center !important
}
.tal {
  text-align: left !important
}
.tar {
  text-align: right !important
}
.pt0 {
  padding-top: 0px !important
}
.mt0 {
  margin-top: 0px !important
}
.mt10 {
  margin-top: 10px !important
}
.mt15 {
  margin-top: 15px !important
}
.mt20 {
  margin-top: 20px !important
}
.mt25 {
  margin-top: 25px !important
}
.mt30 {
  margin-top: 30px !important
}
.mt40 {
  margin-top: 40px !important
}
.mt50 {
  margin-top: 50px !important
}
.mt60 {
  margin-top: 60px !important
}
.mt70 {
  margin-top: 70px !important
}
.mt80 {
  margin-top: 80px !important
}
.mt90 {
  margin-top: 90px !important
}
.mt100 {
  margin-top: 100px !important
}
.mb80 {
  margin-bottom: 80px !important
}
.hide {
  display: none !important
}

.iconfont {
  font-size: inherit
}
.cblue {
  color: #55ade5 !important
}
.body-en {
  word-break: break-word
}
.iconfont {
  font-size: inherit
}
.flexCentery {
  display: flex;
  align-items: center
}
.flexCenterxy {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center
}
.flexCenterxys {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center
}
.ctArrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #ccc
}
.maintop {
  padding-top: 70px
}
.burger {
  padding: 15px;
  cursor: pointer;
  position: absolute;
  right: 0
}
.burger .burger-in {
  width: 30px;
  margin: 0 auto
}
.burger [class^=line] {
  background: #f56500;
  height: 3px;
  margin-bottom: 5px;
  opacity: 1;
  transition: all .3s ease;
  -webkit-transition: all .3s ease
}
.burger .line1 {
  width: 30px
}
.burger .line1:last-of-type {
  margin-bottom: 0
}
.burger .line1:hover {
  width: 30px
}
.burger .line2 {
  width: 25px
}
.burger .line2:last-of-type {
  margin-bottom: 0
}
.burger .line2:hover {
  width: 30px
}
.burger .line3 {
  width: 20px
}
.burger .line3:last-of-type {
  margin-bottom: 0
}
.burger .line3:hover {
  width: 30px
}
.burger.on .line1 {
  -webkit-transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 6);
  transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 6)
}
.burger.on .line2 {
  visibility: hidden;
  opacity: 0;
  -webkit-transform: matrix(1, 0, 0, 1, -40, 0);
  transform: matrix(1, 0, 0, 1, -40, 0)
}
.burger.on .line3 {
  width: 30px;
  -webkit-transform: matrix(0.7071, -0.7071, 0.7071, 0.7071, 0, -10);
  transform: matrix(0.7071, -0.7071, 0.7071, 0.7071, 0, -10)
}
.bgfixed {
  background-attachment: fixed !important
}
@media screen and (max-width: 1300px) {
  .wrap, .wrap2, .wrap3, .wrap4 {
    width: 980px
  }
}
@media screen and (max-width: 750px) {
  .wrap, .wrap2, .wrap3, .wrap4 {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 0 15px
  }
  .burger {
    display: block
  }
  .maintop, .maintop2 {
    padding-top: 60px
  }
  .bgfixed {
    background-attachment: scroll !important
  }
}
.paging {
  height: 32px;
  line-height: 30px;
  margin: 50px 0;
  text-align: center
}
.paging a {
  display: inline-block;
  padding: 0 12px;
  margin: 5px 3px 0;
  font-size: 14px;
  border: 1px solid #999;
  color: #666;
  transition: all .3s ease;
  -webkit-transition: all .3s ease
}
.paging a:hover, .paging a.cur {
  background: #222;
  border-color: #222;
  color: #fff
}
.pc-show {
  display: block
}
.wap-show, .m-show {
  display: none !important
}
@media screen and (max-width: 750px) {
  .pc-show {
    display: none !important
  }
  .wap-show, .m-show {
    display: block !important
  }
}


.swiper-btn {
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  z-index: 1;
  cursor: pointer;
  top: 50%;
  margin-top: -40px;
  width: 50px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  color: #fff;
  font-size: 36px;
  color: #fff;
  outline: none
}
.swiper-btn:hover {
  color: #f56500
}
.swiper-btn.swiper-button-disabled {
  pointer-events: none;
  opacity: .1
}
.swiper-btn-prev {
  left: 15px
}
.swiper-btn-next {
  right: 15px
}
@media screen and (max-width: 768px) {
  .swiper-btn {
    margin-top: -25px;
    width: 30px;
    height: 50px;
    font-size: 22px;
    border-radius: 5px
  }
  .swiper-btn-prev {
    left: 10px
  }
  .swiper-btn-next {
    right: 10px
  }
  .m-toper ~ .com-banner {
    margin-top: 60px
  }
}
.pageMenus {
  height: 60px;
  background: #f2f2f2;
  position: relative
}
.pageMenus .wrap {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%
}
.pageMenus a {
  font-size: 16px;
  position: relative;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  margin-right: 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  color: #787878
}
.pageMenus a:after {
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 0;
  transition: all .4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  -webkit-transition: all .4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  height: 3px;
  content: "";
  width: 100%;
  background: #f56500
}
.pageMenus a.on, .pageMenus a:hover {
  color: #f56500
}
.pageMenus a.on:after, .pageMenus a:hover:after {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1
}
.pageMenus .fix-pageMenu {
  height: 60px;
  z-index: 101
}
.pageMenus .fix-pageMenu.widgetFix {
  position: absolute;
  width: 100%;
  background: #f2f2f2;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .15)
}
.pageMenus.whiteMenus {
  background: #fff
}
.pageMenus.whiteMenus .fix-pageMenu.widgetFix {
  background: #fff
}
.pageMenus.tal .wrap {
  display: flex;
  justify-content: flex-start;
  align-items: stretch
}
@media screen and (max-width: 750px) {
  .pageMenus {
    height: auto;
    background: #f0f3f7 !important;
    display: none
  }
  .pageMenus .wrap {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap
  }
  .pageMenus a {
    font-size: 12px;
    height: 40px;
    padding: 0 5px;
    margin: 0;
    background: #f0f3f7;
    z-index: 99
  }
}
.groom-swiper-btns .swiper-btn {
  top: 42%;
  color: #333;
  width: 62px;
  height: 62px;
  font-size: 34px;
  border: 1px solid #333;
  border-radius: 50%
}
.groom-swiper-btns .swiper-btn:hover {
  background: #0a3f7f;
  color: #fff;
  border-color: #0a3f7f
}
.groom-swiper-btns .swiper-btn-prev {
  left: -82px
}
.groom-swiper-btns .swiper-btn-next {
  right: -82px
}
.pres-form {
  width: 650px;
  padding: 60px 0;
  margin: 0 auto
}
.pres-form .contact-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30px
}
.pres-form .contact-row .cr-col {
  width: 48%
}
.pres-form .ipt-lab {
  width: 160px;
  box-sizing: border-box;
  text-align: right;
  padding-left: 8px;
  line-height: 42px;
  font-size: 15px;
  color: #444
}
.pres-form .ipt-lab i {
  color: red
}
.pres-form .ipt-ctrl {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 4px
}
.pres-form .ipt-ctrl .ipt-text {
  line-height: 22px;
  padding: 10px 0;
  font-size: 14px;
  font-size: 15px;
  color: #444
}
.pres-form .ipt-str {
  font-size: 15px;
  padding: 10px 0;
  line-height: 22px
}
.pres-form .ipt {
  flex: 1;
  display: inline-block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  border: 1px solid #ccc;
  background: #f2f2f2;
  color: #333;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 10px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  border-radius: 18px
}
.pres-form .ipt:focus {
  border-color: #0066b2
}
.pres-form textarea.ipt {
  height: 150px
}
.pres-form .ipt-full {
  display: block;
  margin-top: 12px
}
.pres-form .ipt-full .ipt-lab {
  width: auto;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  padding-bottom: 5px
}
.pres-form .subs {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center
}
.pres-form .subs button {
  display: block;
  width: 180px;
  height: 36px;
  border: 0;
  background: #f56500;
  color: #fff;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 18px;
  line-height: 36px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  position: relative;
  overflow: hidden
}
.pres-form .subs button:before {
  content: "";
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  opacity: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #f56500;
  top: 0;
  left: 0;
  border-radius: 18px
}
.pres-form .subs button:after {
  content: "";
  color: #fff;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  font-size: 18px;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: iconfont;
  border-radius: 18px
}
.pres-form .subs button:hover {
  border-color: #f56500
}
.pres-form .subs button:hover:before {
  opacity: 1
}
.pres-form .subs button:hover:after {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}
@media screen and (max-width: 768px) {
  .pres-form {
    width: 100%;
    padding: 40px 10px
  }
  .pres-form .contact-row {
    display: block
  }
  .pres-form .contact-row .cr-col {
    width: 100%
  }
}

.home-view4 {
  padding: 60px 0;
  overflow: hidden
}
.home-view4 .hexp-swiper-wrap {
  margin-top: 30px;
  position: relative
}
.home-view4 .hexp-swiper-wrap .swiper-wrapper {
  align-items: stretch
}
.home-view4 .hexp-swiper-wrap a {
  padding: 18px;
  border: 1px solid transparent;
  height: auto
}
.home-view4 .hexp-swiper-wrap .pic {
  position: relative;
  display: block;
  overflow: hidden
}
.home-view4 .hexp-swiper-wrap .pic::before {
  display: block;
  content: "";
  padding-bottom: 100%
}
.home-view4 .hexp-swiper-wrap .pic img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease;
  -webkit-transition: all .3s ease
}

.home-view4 .hexp-swiper-wrap .pic:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}
.home-view4 .hexp-swiper-wrap .info {
  opacity: 0;
  padding: 25px 10px 13px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease
}
.home-view4 .hexp-swiper-wrap .hideInfo {
  display: none
}
.home-view4 .hexp-swiper-wrap .t {
  font-size: 1.5rem; color: #000
}
.home-view4 .hexp-swiper-wrap .d {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5em;
opacity: 0.8;
  color: #4a4a4a;
}
.home-view4 .hexp-swiper-wrap .swiper-slide-active {
  border-color: #ddd
}
.home-view4 .hexp-swiper-wrap .swiper-slide-active .info {
  opacity: 1
}
.home-view4 .hexp-swiper-wrap a:hover .info {
  color: #f56500
}
.home-view4 .groom-swiper-btns .swiper-btn {
  top: 87%
}
.home-view4 .groom-swiper-btns .swiper-btn-prev {
  left: 34%
}
.home-view4 .groom-swiper-btns .swiper-btn-next {
  right: 34%
}
.home-view4 .swiper-pagination {
  display: none
}
.home-view4 .hexp-more {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px
}
.home-view4 .hexp-more a {
  display: block;
  width: 160px;
  height: 36px;
  border: 1px solid #333;
  background: none;
  color: #333;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 18px;
  line-height: 34px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  position: relative;
  overflow: hidden
}
.home-view4 .hexp-more a:before {
  content: "";
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  opacity: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #f56500;
  top: 0;
  left: 0;
  border-radius: 18px
}
.home-view4 .hexp-more a:after {
  content: "";
  color: #fff;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  font-size: 18px;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: iconfont;
  border-radius: 18px
}
.home-view4 .hexp-more a:hover {
  border-color: #f56500
}
.home-view4 .hexp-more a:hover:before {
  opacity: 1
}
.home-view4 .hexp-more a:hover:after {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}
@media screen and (max-width: 768px) {
  .home-view4 {
    padding: 40px 10px
  }
  .home-view4 .hexp-swiper-wrap {
    position: relative
  }
  .home-view4 .hexp-swiper-wrap a {
    padding: 10px
  }
  .home-view4 .hexp-swiper-wrap .info {
    padding: 15px 0
  }
  .home-view4 .hexp-swiper-wrap .t {
    font-size: 16px
  }
  .home-view4 .hexp-swiper-wrap .d {
    font-size: 14px
  }
  .home-view4 .groom-swiper-btns {
    display: none
  }
  .home-view4 .groom-swiper-btns .swiper-btn {
    top: 65%;
    width: 36px;
    height: 36px;
    background: #fff
  }
  .home-view4 .groom-swiper-btns .swiper-btn:hover {
    background: #f56500
  }
  .home-view4 .groom-swiper-btns .swiper-btn-prev {
    left: -42px
  }
  .home-view4 .groom-swiper-btns .swiper-btn-next {
    right: -42px
  }
  .home-view4 .swiper-pagination {
    display: block
  }
  .home-view4 .hexp-more {
    margin-top: 20px
  }
}


.home-view4 .hexp-swiper-wrap .pic em{ width: 100%; height: 100%;display: flex; display: -webkit-flex; align-items: center;  justify-content: center; position: absolute; z-index: 999; top:0; left: 0; font-style: normal}
.home-view4 .hexp-swiper-wrap .pic b{ text-align: left; font-size:1.5rem; line-height: 1.15em; font-weight: bolder; color:#fff; text-shadow:2px 3px 3px rgb(34 24 21 / 70%)}
.home-view4 .hexp-swiper-wrap .pic span{ width:11rem; height: 11rem;}
.home-view4 .hexp-swiper-wrap .pic span.hexpswipericon1{background: url(../image/1.png) no-repeat center;background-size:100%;}
.home-view4 .hexp-swiper-wrap .pic span.hexpswipericon2{background: url(../image/2.png) no-repeat center;background-size:100%;}
.home-view4 .hexp-swiper-wrap .pic span.hexpswipericon3{background: url(../image/3.png) no-repeat center;background-size:100%;}
.home-view4 .hexp-swiper-wrap .pic span.hexpswipericon4{background: url(../image/4.png) no-repeat center;background-size:100%;}
.home-view4 .hexp-swiper-wrap .pic span.hexpswipericon5{background: url(../image/5.png) no-repeat center;background-size:100%;}
.home-view4 .hexp-swiper-wrap .pic span.hexpswipericon6{background: url(../image/6.png) no-repeat center;background-size:100%;}
.home-view4 .hexp-swiper-wrap .pic span{ display: none}
.home-view4 .hexp-swiper-wrap .pic  b{display:inline-block;}
.home-view4 .hexp-swiper-wrap .swiper-slide-active .pic  span{ display: block}
.home-view4 .hexp-swiper-wrap .swiper-slide-active .pic  b{ display:none}