@keyframes lineGrow {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes mapIcon_bounce {
  from {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  to {
    transform: translateY(0);
  }
}
.map {
  width: 100%;
  background: #f3f5f8;
  padding: 52px;
  box-sizing: border-box;
}
.map .map-con {
  display: flex;
  justify-content: space-between;
}
.map .map-con .map-pic {
  margin-top: 32px;
  position: relative;
  width: 680px;
  height: 517px;
  background: url(http://www.qfedu.com/imgs2022/map.png) no-repeat;
  background-size: 100% 100%;
}
.map .map-con .map-pic span {
  position: absolute;
  z-index: 10;
  font-size: 15px;
  color: #101030;
  line-height: 1;
  cursor: pointer;
}
.map .map-con .map-pic span::before {
  content: '';
  position: absolute;
  top: -31px;
  left: 3px;
  width: 25px;
  height: 27px;
  background: url(http://www.qfedu.com/images/index2021/map-icon.png) no-repeat;
  background-size: 25px 27px;
}
.map .map-con .map-pic span.left::before {
  top: -10px;
  left: -26px;
}
.map .map-con .map-pic span.right::before {
  top: -10px;
  left: 32px;
}
.map .map-con .map-pic span.bottom::before {
  top: 20px;
  left: 0;
}
.map .map-con .map-pic span.active {
  color: #EF4437;
  animation: mapIcon_bounce 0.3s ease 1;
}
.map .map-con .map-pic span.active::before {
  background: url(http://www.qfedu.com/imgs2022/map-icon-active.png) no-repeat;
}
.map .map-con .map-pic span.bj {
  top: 206px;
  left: 436px;
}
.map .map-con .map-pic span.sz {
  bottom: 56px;
  left: 435px;
}
.map .map-con .map-pic span.sh {
  top: 306px;
  left: 536px;
}
.map .map-con .map-pic span.gz {
  bottom: 81px;
  left: 383px;
}
.map .map-con .map-pic span.zz {
  top: 278px;
  left: 417px;
}
.map .map-con .map-pic span.dl {
  top: 188px;
  left: 527px;
}
.map .map-con .map-pic span.wh {
  top: 336px;
  left: 424px;
}
.map .map-con .map-pic span.cd {
  top: 334px;
  left: 296px;
}
.map .map-con .map-pic span.xa {
  top: 283px;
  left: 362px;
}
.map .map-con .map-pic span.hz {
  top: 324px;
  left: 515px;
}
.map .map-con .map-pic span.qd {
  top: 234px;
  left: 514px;
}
.map .map-con .map-pic span.cq {
  top: 336px;
  left: 358px;
}
.map .map-con .map-pic span.cs {
  top: 367px;
  left: 399px;
}
.map .map-con .map-pic span.heb {
  top: 87px;
  left: 556px;
}
.map .map-con .map-pic span.nj {
  top: 264px;
  left: 487px;
}
.map .map-con .map-pic span.ty {
  top: 225px;
  left: 397px;
}
.map .map-con .map-pic span.sy {
  top: 144px;
  left: 536px;
}
.map .map-con .map-pic span.hf {
  top: 312px;
  left: 456px;
}
.map .map-con .map-pic span.gy {
  top: 392px;
  left: 337px;
}
.map .map-con .map-pic span.jn {
  top: 255px;
  left: 455px;
}
.map .map-con .map-pic .map-active-pics {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.map .map-con .map-pic .map-active-pics div {
  position: absolute;
  background-size: 100% 100%;
  display: none;
}
.map .map-con .map-pic .map-active-pics div.active {
  display: block;
}
.map .map-con .map-pic .map-active-pics .bj {
  top: 180px;
  left: 443px;
  width: 21px;
  height: 24px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-bj.png);
}
.map .map-con .map-pic .map-active-pics .sz {
  bottom: 40px;
  left: 381px;
  width: 97px;
  height: 72px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-sz.png);
}
.map .map-con .map-pic .map-active-pics .sh {
  top: 308px;
  left: 516px;
  width: 9px;
  height: 15px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-sh.png);
}
.map .map-con .map-pic .map-active-pics .gz {
  bottom: 40px;
  left: 381px;
  width: 97px;
  height: 72px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-gz.png);
}
.map .map-con .map-pic .map-active-pics .zz {
  top: 251px;
  left: 390px;
  width: 72px;
  height: 68px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-zz.png);
}
.map .map-con .map-pic .map-active-pics .sy,
.map .map-con .map-pic .map-active-pics .dl {
  top: 139px;
  left: 480px;
  width: 70px;
  height: 72px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-dl.png);
}
.map .map-con .map-pic .map-active-pics .wh {
  top: 297px;
  left: 369px;
  width: 89px;
  height: 57px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-wh.png);
}
.map .map-con .map-pic .map-active-pics .cd {
  top: 274px;
  left: 242px;
  width: 128px;
  height: 120px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-cd.png);
}
.map .map-con .map-pic .map-active-pics .xa {
  top: 206px;
  left: 335px;
  width: 64px;
  height: 112px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-xa.png);
}
.map .map-con .map-pic .map-active-pics .hz {
  top: 321px;
  left: 486px;
  width: 46px;
  height: 53px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-hz.png);
}
.map .map-con .map-pic .map-active-pics .qd {
  top: 222px;
  left: 442px;
  width: 81px;
  height: 53px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-qd.png);
}
.map .map-con .map-pic .map-active-pics .cq {
  top: 311px;
  left: 333px;
  width: 55px;
  height: 56px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-cq.png);
}
.map .map-con .map-pic .map-active-pics .cs {
  top: 342px;
  left: 374px;
  width: 64px;
  height: 75px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-cs.png);
}
.map .map-con .map-pic .map-active-pics .heb {
  top: 4px;
  left: 485px;
  width: 132px;
  height: 126px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-heb.png);
}
.map .map-con .map-pic .map-active-pics .nj {
  top: 268px;
  left: 461px;
  width: 62px;
  height: 54px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-nj.png);
}
.map .map-con .map-pic .map-active-pics .ty {
  top: 189px;
  left: 391px;
  width: 43px;
  height: 86px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-ty.png);
}
.map .map-con .map-pic .map-active-pics .hf {
  top: 274px;
  left: 444px;
  width: 56px;
  height: 72px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-hf.png);
}
.map .map-con .map-pic .map-active-pics .gy {
  top: 354px;
  left: 310px;
  width: 70px;
  height: 63px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-gy.png);
}
.map .map-con .map-pic .map-active-pics .jn {
  top: 222px;
  left: 442px;
  width: 81px;
  height: 53px;
  background-image: url(http://www.qfedu.com/imgs2022/maps/map-qd.png);
}
.map .map-posi {
  margin-top: 36px;
  border-bottom: solid 1px #dbdbdb;
  margin-bottom: 32px;
  display: flex;
}
.map .map-posi span {
  flex: 1;
  position: relative;
  padding-bottom: 15px;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  color: #333;
}
.map .map-posi span.active {
  color: #326cf6;
  font-weight: bold;
}
.map .map-posi span.active::before {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  content: '';
  background-color: #326cf6;
  display: inline-block;
  animation: lineGrow 0.3s ease forwards 1;
}
.map .map-posi span:first-child::after {
  width: 0;
}
.map .map-txt {
  position: relative;
  width: 486px;
  height: 592px;
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#000000, #000000);
  background-blend-mode: normal, normal;
  box-shadow: 0px 2px 7px 0px rgba(216, 220, 233, 0.35);
  border-radius: 10px;
  border: solid 1px #e7e9ef;
}
.map .map-txt .txt {
  display: none;
}
.map .map-txt .txt.active {
  display: block;
}
.map-txt-tit {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  padding: 34px 0 30px 34px;
}
.map-txt-addre {
  width: 90px;
  height: 34px;
  line-height: 34px;
  border-radius: 4px;
  border: solid 1px #999a9c;
  font-size: 16px;
  color: #808182;
  text-align: center;
  margin-left: 34px;
}
.map-txt-addre.mt {
  margin-top: 18px;
}
.map-txt p {
  width: 418px;
  font-size: 16px;
  color: #595a5a;
  margin-left: 34px;
  margin-top: 18px;
  line-height: 1.2;
}
.map-btn {
  position: absolute;
  right: 33px;
  top: 37px;
  width: 182px;
  height: 43px;
  line-height: 43px;
  background-color: #326cf6;
  border-radius: 4px;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}
.map-btn::before {
  position: absolute;
  content: '';
  left: 86px;
  top: 16px;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: cycleScale_40 1s ease infinite;
}
.map-txt .swiper-container {
  width: 418px;
  height: 212px;
  position: absolute;
  bottom: 53px;
  left: 34px;
}
.map-txt .swiper-container img {
  width: 418px;
  height: 212px;
}
.map-txt .swiper-container .swiper-slide {
  background-color: #494b58;
}
.map-txt .swiper-container:hover .swiper-button-prev,
.map-txt .swiper-container:hover .swiper-button-next {
  opacity: 0.4;
}
.map-txt .swiper-container .swiper-button-prev,
.map-txt .swiper-container .swiper-button-next {
  width: 32px;
  height: 68px;
  background: #000000;
  opacity: 0;
  border-radius: 5px;
  text-align: center;
  line-height: 68px;
  color: #fff;
  transition: all ease 0.3s;
}
.map-txt .swiper-container .swiper-button-prev:hover,
.map-txt .swiper-container .swiper-button-next:hover {
  opacity: 0.8;
}
.map-txt .swiper-container .swiper-button-prev i,
.map-txt .swiper-container .swiper-button-next i {
  font-size: 22px;
}