.page-contact {
  background: #112459;
}
.page-contact .container {
  font-size: 0;
  padding: 40px 0!important;
}
.page-contact .container .left {
  width: 100%;
  padding-top: 45%;
  display: inline-block;
  position: relative;
}
.page-contact .container .left #contactMap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.page-contact .container .right {
  display: inline-block;
  width: 55%;
  padding-top: 25%;
  position: relative;
}
.page-contact .container .right .main {
  position: absolute;
  left: 0;
  top: 50px;
  bottom: 0;
  right: 0;
  padding: 30px 0 0 80px;
}
.page-contact .container .right .main .cell {
  position: relative;
  float: left;
}
.page-contact .container .right .main .cell::before {
  display: inline-block;
  content: '';
  width: 66px;
  height: 66px;
  background: linear-gradient(90deg, #031e7a, #076cda);
  position: absolute;
  left: -18px;
  top: -30px;
  z-index: 1;
}
.page-contact .container .right .main .cell .con {
  position: relative;
  z-index: 2;
}
.page-contact .container .right .main .cell .con .tit {
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
}
.page-contact .container .right .main .cell .con .desc {
  font-size: 16px;
  line-height: 22px;
  margin-top: 8px;
  color: #ffffff;
  opacity: 0.9;
}
.page-contact .container .right .main .cell .con .margin50 {
  margin-left: 50px;
}
.page-contact .container .right .main .big::before {
  width: 86px;
  height: 86px;
  top: 0;
}
.page-contact .container .right .main .big .con .tit {
  font-size: 40px;
  line-height: 56px;
}
.page-contact .container .right .main .big .con .desc {
  margin-top: 0;
}
.page-contact .container .right .main .left130 {
  left: 420px;
}
.page-contact .container .right .main .left100 {
  left: 40px;
}
.page-contact .container .right .main .margin42 {
  margin-top: 80px;
}
.page-contact .container .right .main .cell1,
.page-contact .container .right .main .cell2,
.page-contact .container .right .main .cell3 {
  transform: translateX(50%);
  opacity: 0;
}
.page-contact .container .right .main .cell1 {
  margin-top: -108px;
  animation: contactAnimat1 2s forwards 0.3s ease-in-out;
}
.page-contact .container .right .main .cell2 {
  animation: contactAnimat2 2s forwards ease-in-out;
}
.page-contact .container .right .main .cell3 {
  animation: contactAnimat3 2s forwards 0.6s ease-in-out;
}
@keyframes contactAnimat1 {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes contactAnimat2 {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes contactAnimat3 {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.page-contact .container .right .sk-xx {
  font-size: 22px;
  color: #39E0DA;
  position: absolute;
  display: inline-block;
}
.page-contact .container .right .sk-xx.top0 {
  top: 20px;
}
.page-contact .container .right .sk-xx.left50 {
  left: 50%;
}
.page-contact .container .right .sk-xx.right0 {
  right: 0;
}
.page-contact .container .right .sk-xx.top30 {
  top: 60%;
}
.page-contact .container .right .sk-xx.left0 {
  left: 80px;
}
.page-contact .container .right .sk-xx.top50 {
  top: 15%;
}
.page-contact .container .right .sk-xx.left60 {
  left: 168%;
}
.page-contact .container .right .sk-xx.bottom10 {
  bottom: 25%;
  left: 120%;
}
@media (max-width: 991px) and (min-width: 320px) {
  .page-contact .container {
    padding: 0!important;
    display: flex;
    flex-direction: column;
  }
  .page-contact .container .left {
    width: 100%;
    padding-top: 0%;
    height: 6rem;
  }
  .page-contact .container .right {
    width: 100%;
    padding: 0.5rem 0.3rem;
  }
  .page-contact .container .right .main {
    position: static;
    padding: 0;
  }
  .page-contact .container .right .main .left130 {
    left: 0;
  }
}