.in-to-right-before {
  opacity: 0;
  transform: translateX(-20%)
}

.in-to-right-active {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 1;
  transform: translateX(0)
}

.in-to-right-after {
  opacity: 1
}

.in-to-left-before {
  opacity: 0;
  transform: translateX(20%)
}

.in-to-left-active {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 1;
  transform: translateX(0)
}

.in-to-left-after {
  opacity: 1
}

.in-to-bottom-before {
  opacity: 0;
  transform: translateY(-20%)
}

.in-to-bottom-active {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 1;
  transform: translateY(0)
}

.in-to-bottom-after {
  opacity: 1
}

.in-to-top-before {
  opacity: 0;
  transform: translateY(20%)
}

.in-to-top-active {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 1;
  transform: translateY(0)
}

.in-to-top-after {
  opacity: 1
}

.out-to-right-before {
  opacity: 1;
  transform: translateX(0)
}

.out-to-right-active {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 0;
  transform: translateX(20%)
}

.out-to-right-after {
  opacity: 0
}

.out-to-left-before {
  opacity: 1;
  transform: translateX(0)
}

.out-to-left-active {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 0;
  transform: translateX(-20%)
}

.out-to-left-after {
  opacity: 0
}

.out-to-top-before {
  opacity: 1;
  transform: translateY(0)
}

.out-to-top-active {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 0;
  transform: translateY(-20%)
}

.out-to-top-after {
  opacity: 0
}

.out-to-bottom-before {
  opacity: 1;
  transform: translateY(0)
}

.out-to-bottom-active {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 0;
  transform: translateY(20%)
}

.out-to-bottom-after {
  opacity: 0
}

.custom-transition-a-in-before {
  width: 0 !important
}

.custom-transition-a-in-active {
  transition-property: opacity, transform;
  transition-duration: 1s;
  transition-property: width;
  transition-delay: .5s
}

.footer {
  color: red
}

.footer--top {
  position: relative;
  height: 22.22222vw
}

.footer--top--content {
  width: 80%;
  text-align: center;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff
}

.footer--top--content div {
  font-size: 2.36111vw;
  line-height: 1em;
  margin-bottom: 2.77778vw
}

.footer--top--content a {
  position: relative;
  font-size: 1.66667vw;
  line-height: 1em;
  color: #fff;
  text-decoration: none
}

.footer--top--content a:before {
  display: block;
  content: "";
  width: 2.43056vw;
  height: 1.73611vw;
  background-image: url(../images/email.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
  position: absolute;
  left: -2.77778vw;
  top: 50%;
  transform: translateY(-50%)
}

.footer--top--bg {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%
}

.footer--bottom {
  height: 4vw;
  background: #102131;
  display: flex
}

.footer--bottom--illu {
  flex: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.footer--bottom--illu--p1 {
  font-size: 1vw;
  color: #8f9fcc;
  line-height: 1em;
}

.footer--bottom--illu--p2 {
  font-size: .83333vw;
  color: #6b7799;
  line-height: 1em;
  margin-bottom: 10px;
}

.footer--bottom--illu--p2 a {
  font-size: .83333vw;
  color: #6b7799;
  text-decoration: none;
}

.footer--bottom--menu {
  flex: 6;
  display: flex;
  align-items: center;
  justify-content: flex-end
}

#msn-footer-menu {
  padding-right: 3.47222vw
}

#msn-footer-menu ul {
  display: flex
}

#msn-footer-menu li {
  height: 5.20833vw;
  line-height: 5.20833vw;
  box-sizing: border-box;
  margin: 0 1.04167vw
}

#msn-footer-menu li:hover {
  border-bottom: .27778vw solid #8f9fcc
}

#msn-footer-menu li a {
  text-decoration: none;
  color: #8f9fcc;
  font-size: .83333vw;
  font-weight: 600
}

.msn-header {
  height: 5.20833vw;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: background-color .5s;
  z-index: 99;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

.active .icon-toggle {
  display: none;
}

.icon-toggle {
  cursor: pointer;
  color: #fff;
  margin-left: 2vw;
  margin-top: 1vw;
}

.msn-header .icon-active {
  color: #33b180
}

.icon-toggle img {
  width: 2vw;
}

.msn-header.active .msn-header-logo {
  background-image: url(../images/logo.png)
}

.msn-header.active .nav #msn-header-menu .menu>li>a,
.msn-header.active .nav .login-box>a:first-of-type {
  color: #68779c
}

.msn-header.active .nav #msn-header-menu .menu>li.active>a {
  color: #0b1531
}

.msn-header.active .nav #msn-header-menu .menu>li.active>a:after {
  content: "";
  display: block;
  width: 100%;
  height: .34722vw;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #0b1531
}

.msn-header.active .nav #msn-header-menu .menu>li>a:hover {
  color: #0b1531
}

.msn-header.active .nav #msn-header-menu .menu>li>a:hover:after {
  content: "";
  display: block;
  width: 100%;
  height: .34722vw;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #0b1531
}

.msn-header .msn-header-logo {
  float: left;
  margin-left: 9.6%;
  margin-top: 1.23611vw;
  width: 7.23611vw;
  height: 2vw;
  background-image: url(../images/Qfinasia.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.msn-header .msn-header-logo a {
  display: block;
  height: 100%;
  width: 100%
}

.msn-header .nav {
  margin-right: 9.6%;
  float: right
}

.msn-header .nav #msn-header-menu {
  float: left
}

.msn-header .nav #msn-header-menu .menu>li {
  float: left;
  height: 5.20833vw
}

.msn-header .nav #msn-header-menu .menu>li:not(:last-child) {
  margin-right: 2.08333vw
}

.msn-header .nav #msn-header-menu .menu>li.active>a {
  color: #fff
}

.msn-header .nav #msn-header-menu .menu>li.active>a:after {
  content: "";
  display: block;
  width: 100%;
  height: .34722vw;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff
}

.msn-header .nav #msn-header-menu .menu>li>a {
  display: block;
  font-family: AvenirNext-Bold;
  font-size: 1.11111vw;
  color: #fff;
  letter-spacing: 0;
  line-height: 5.20833vw;
  text-decoration: none;
  position: relative;
  font-weight: bold;
}

.msn-header .nav #msn-header-menu .menu>li>a:hover {
  color: #fff
}

.msn-header .nav #msn-header-menu .menu>li>a:hover:after {
  content: "";
  display: block;
  width: 100%;
  height: .34722vw;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff
}

.msn-header .nav .login-box {
  margin-left: 2.77778vw;
  float: left;
  height: 5.20833vw;
  display: table
}

.msn-header .nav .login-box>.placeholder {
  display: table-cell;
  width: 1.38889vw
}

.msn-header .nav .login-box>a {
  display: table-cell;
  vertical-align: middle;
  font-family: AvenirNext-Bold, Arial, Helvetica, sans-serif;
  font-size: 1.11111vw;
  color: #fff;
  letter-spacing: 0;
  text-decoration: none
}

.msn-header .nav .login-box>a .login {
  height: 3.47222vw;
  line-height: 3.47222vw;
  border-radius: .20833vw;
  background-color: transparent
}

.msn-header .nav .login-box>a .register {
  height: 3.47222vw;
  line-height: 3.47222vw;
  padding: 0 .69444vw;
  background: #ffb900;
  border-radius: .20833vw
}

@media (max-width:800px) {
  .msn-header .msn-header-logo {
    display: none
  }
}

* {
  margin: 0;
  padding: 0
}

ol,
ul {
  list-style: none
}

body {
  font-family: AvenirNext-Medium, Arial, Helvetica, sans-serif
}

.a-wrapper {
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none
}

.common-bc-1-1 {
  background-image: url(../images/18@3x.png), url(../images/17@3x.png), url(../images/16@2x.png)
}

.common-bc-1-2 {
  background-image: url(../images/18@3x.png), url(../images/17@3x.png), url(../images/22@2x.png)
}

.common-bc-1-3 {
  background-image: url(../images/18@3x.png), url(../images/17@3x.png), url(../images/24@2x.png)
}

.common-bc-1-4 {
  background-image: url(../images/18@3x.png), url(../images/17@3x.png), url(../images/26@2x.png)
}

.common-bc-1 {
  width: 100%;
  background-color: #f5f9ff;
  background-repeat: no-repeat;
  background-size: 29.02778vw, 21.73611vw, 100%;
  background-position: 0 100%, right 13.47222vw, 0 0
}

.common-bc-1--title {
  -ms-user-select: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  height: 34.86111vw;
  padding-top: 13.19444vw;
  box-sizing: border-box;
  font-size: 0;
  text-align: center
}

.common-bc-1--title span {
  font-family: AvenirNext-Bold, Arial, Helvetica, sans-serif;
  font-size: 2.77778vw;
  color: #fff;
  letter-spacing: 0;
  text-align: center;
  line-height: 4.16667vw
}

#footer-article-banner main {
  height: 47.22222vw;
  position: relative
}

#footer-article-banner main .btn {
  width: 2.77778vw;
  height: 2.77778vw;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: .69444vw;
  z-index: 9
}

#footer-article-banner main .btn.active {
  background-color: #276bef;
  cursor: pointer
}

#footer-article-banner main .btn.inactive {
  background-color: #276bef;
  cursor: not-allowed;
  opacity: .2
}

#footer-article-banner main .btn-left {
  background-image: url(../images/11-left@3x.png);
  background-color: #276bef;
  position: absolute;
  top: 26.45833vw;
  left: 9.58333vw;
  margin-top: -1.38889vw
}

#footer-article-banner main .btn-right {
  background-image: url(../images/11-right@3x.png);
  position: absolute;
  top: 26.45833vw;
  right: 9.58333vw;
  margin-top: -1.38889vw
}

#footer-article-banner main .btn-left.active:hover,
#footer-article-banner main .btn-right.active:hover {
  background-color: #0059dc
}

#footer-article-banner main .title {
  font-family: AvenirNext-DemiBold, Arial, Helvetica, sans-serif;
  font-size: 2.08333vw;
  color: #0b1531;
  text-align: center;
  line-height: 2.08333vw;
  padding-top: 8.75vw
}

#footer-article-banner main .title:after {
  background: #ffb900;
  width: 3.47222vw;
  height: .69444vw;
  display: block;
  content: "";
  margin: 1.73611vw auto 0
}

#footer-article-banner main .swiper {
  height: 22.36111vw;
  width: 71.66667vw;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  overflow: hidden
}

#footer-article-banner main .swiper .wrapper {
  width: 9999%;
  height: 100%
}

#footer-article-banner main .swiper .wrapper ol {
  margin-top: 5.55556vw;
  width: 71.66667vw;
  float: left;
  height: 15.41667vw
}

#footer-article-banner main .swiper .wrapper ol li {
  float: left;
  height: 100%;
  width: 27%;
  margin: 0 3.16667%;
  box-sizing: border-box;
  border: 1px solid #d0dbfe;
  box-shadow: 0 .34722vw .69444vw 0 rgba(56, 96, 244, .09);
  border-radius: .41667vw;
  overflow: hidden
}

#footer-article-banner main .swiper .wrapper ol li a {
  text-decoration: none;
  display: block;
  height: 100%;
  overflow: hidden;
  background-color: #fff
}

#footer-article-banner main .swiper .wrapper ol li a .top {
  height: 10.27778vw;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover
}

#footer-article-banner main .swiper .wrapper ol li a .bottom {
  font-family: AvenirNext-Medium, Arial, Helvetica, sans-serif;
  font-size: .97222vw;
  color: #374567;
  text-align: center;
  line-height: 1.38889vw;
  box-sizing: border-box;
  padding: 1.25vw .69444vw 0;
  overflow: hidden
}

#footer-logo-banner {
  background-color: #276bef;
  position: relative;
  padding: 1.2vw;
  padding-left: 9.58333vw;
  padding-right: 9.58333vw;
  padding-bottom: 5vw;
}

#footer-logo-banner .title {
  color: #fff;
  font-size: 2vw;
  margin-bottom: 2vw;
}

#footer-logo-banner .image-warp {
  margin: 0 20vw 0 20vw;
  display: flex;
  justify-content: space-between;
}

#footer-logo-banner .image-warp img:nth-child(1) {
  width: 8vw;
  height: 2.16vw;
}

#footer-logo-banner .image-warp img:nth-child(2) {
  width: 10vw;
  height: 3vw;
}

#footer-logo-banner main {
  padding: 8.05556vw 9.58333vw;
  /* height: 4.72222vw; */
  position: relative
}

#footer-logo-banner main .btn {
  width: 2.77778vw;
  height: 2.77778vw;
  margin-top: .97222vw;
  background-color: hsla(0, 0%, 100%, .2);
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: .69444vw;
  z-index: 9
}

#footer-logo-banner main .btn-left {
  background-image: url(../images/11-left@3x.png);
  position: absolute;
  top: 8.05556vw;
  left: 9.58333vw
}

#footer-logo-banner main .btn-right {
  background-image: url(../images/11-right@3x.png);
  position: absolute;
  top: 8.05556vw;
  right: 9.58333vw
}

#footer-logo-banner main .btn-left.active:hover {
  background-image: url(../images/12-left@3x.png);
  background-color: #fff
}

#footer-logo-banner main .btn-right.active:hover {
  background-image: url(../images/12-right@3x.png);
  background-color: #fff
}

#footer-logo-banner main .btn.active {
  cursor: pointer
}

#footer-logo-banner main .btn.inactive {
  cursor: not-allowed
}


#footer-logo-banner main .swiper .wrapper {
  height: 100%;
  width: 999%
}

#footer-logo-banner main .swiper .wrapper ol {
  float: left;
  height: 100%;
  width: 67.08333vw;
  display: flex;
  justify-content: space-between
}

#footer-logo-banner main .swiper .wrapper ol li {
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 100%
}

#footer-logo-banner main .swiper .wrapper ol:first-child {
  padding-right: 4.16667vw
}

#footer-logo-banner main .swiper .wrapper ol:first-child>li:first-child {
  background-image: url(../images/li-1@3x.png);
  width: 7vw
}

#footer-logo-banner main .swiper .wrapper ol:first-child>li:nth-child(2) {
  background-image: url(../images/li-2@3x.png);
  width: 7vw
}

#footer-logo-banner main .swiper .wrapper ol:nth-child(2)>li:first-child {
  width: 7.63889vw;
  background-image: url(../images/li-7@3x.png)
}

#footer-logo-banner main .swiper .wrapper ol:nth-child(2)>li:nth-child(2) {
  width: 7.63889vw;
  background-image: url(../images/li-8@3x.png)
}

#footer-logo-banner main .swiper .wrapper ol:nth-child(2)>li:nth-child(3) {
  width: 7.63889vw;
  background-image: url(../images/li-9@3x.png)
}

#footer-logo-banner main .swiper .wrapper ol:nth-child(2)>li:nth-child(4) {
  width: 7.29167vw;
  background-image: url(../images/li-10@3x.png)
}

#footer-logo-banner main .swiper .wrapper ol:nth-child(2)>li:nth-child(5) {
  width: 6.11111vw;
  background-image: url(../images/li-11@3x.png)
}

#footer-logo-banner .progress {
  position: absolute;
  bottom: 10%;
  left: 50%;
  margin-left: -2.08333vw
}

#footer-logo-banner .progress li {
  float: left;
  margin: 0 .69444vw;
  display: block;
  height: .69444vw;
  width: .69444vw;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 50%
}

#footer-logo-banner .progress li.active {
  border: .13889vw solid #759ae2;
  background: #759ae2;
  cursor: pointer
}

#footer-logo-banner .progress li.inactive {
  border: .13889vw solid #fff;
  background: transparent;
  cursor: not-allowed
}

.page-home {
  font-size: 0;
  background-image: url(../images/18@3x.png);
  background-position: 0 100%;
  background-size: 29.02778vw
}

.page-home,
.page-home .box-1 {
  background-color: #f5f9ff;
  background-repeat: no-repeat
}

.page-home .box-1 {
  height: 40vw;
  background-image: url(../images/14@3x.png), url(../images/header-logo.png);
  background-size: 1.52778vw, 100% 100%;
  background-position: center 85%, 0 0;
  position: relative;
  overflow: hidden
}

.page-home .box-1 .left {
  position: absolute;
  top: 15.27778vw;
  left: 13.54167vw
}

.page-home .box-1 .left .top>span {
  font-family: AvenirNext-Bold;
  font-size: 2.77778vw;
  color: #fff;
  letter-spacing: 1px;
  line-height: 4.16667vw;
  -ms-user-select: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  font-weight: bolder;
}

.page-home .box-1 .left .startnow {
  margin-top: 3.47222vw;
  width: 13.88889vw;
  height: 4.16667vw;
  background-image: linear-gradient(270deg, #ffc62e, #ff9b63 99%);
  border-radius: .69444vw;
  text-align: center;
  font-size: 0;
  z-index: 9;
  cursor: pointer
}

.page-home .box-1 .left .startnow span {
  font-family: AvenirNext-Bold;
  font-size: 1.73611vw;
  color: #fff;
  letter-spacing: 0;
  line-height: 4.16667vw;
  -ms-user-select: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none
}

.page-home .box-1 .right {
  position: absolute;
  top: 13.95833vw;
  right: 14.51389vw;
  width: 21.04167vw;
  height: 42.63889vw;
  background-image: url(../images/3.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0
}

.page-home .box-1 .right video {
  width: 88%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 6%
}

.page-home .box-1 .mask {
  width: 88.19444444%;
  height: 8.125vw;
  background-image: url(../images/4.png);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 88.19444444%;
  position: absolute;
  left: 0;
  bottom: 0
}

.page-home .box-2 {
  height: 24.09722vw;
  background-color: #f5f9ff
}

.page-home .box-2 .item {
  -ms-user-select: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  margin-top: 2.94444vw;
  width: 38%;
  height: 18.61111vw;
  border: 1px solid #d0dbfe;
  box-shadow: 0 .34722vw .69444vw 0 rgba(56, 96, 244, .09);
  border-radius: .41667vw;
  background-color: #fff;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative
}

.page-home .box-2 .item .bc {
  position: absolute;
  top: 1.38889vw;
  left: 50%;
  width: 7.56944vw;
  margin-left: -3.78472vw;
  height: 6.8vw;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0
}

.page-home .box-2 .item .title {
  padding-top: 9.44444vw;
  padding-bottom: 1.25vw;
  text-align: center
}

.page-home .box-2 .item .title>span {
  font-family: AvenirNext-DemiBold, Arial, Helvetica, sans-serif;
  font-size: 1.875vw;
  color: #374567;
  line-height: 1.875vw
}

.page-home .box-2 .item .line {
  text-align: center
}

.page-home .box-2 .item .line>span {
  font-family: AvenirNext-Medium, Arial, Helvetica, sans-serif;
  font-size: 1.25vw;
  color: #8897af
}

.page-home .box-2 .item .hover-arrow {
  position: absolute;
  bottom: -1.5625vw;
  right: 9.375vw;
  width: 3.125vw;
  height: 3.125vw;
  background-image: url(../images/15@3x.png);
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0
}

.page-home .box-2 .item:hover .hover-arrow {
  opacity: 1;
  transition: all .7s;
  right: 6.25vw
}

.page-home .box-2 .item:hover .bc,
.page-home .box-2 .item:hover .line,
.page-home .box-2 .item:hover .title {
  transition: all .7s;
  transform: scale(1.1)
}

.page-home .box-2 .item.left {
  margin-left: 9.5%;
  float: left;
}

.page-home .box-2 .item.left .bc {
  background-image: url(../images/say.png)
}

.page-home .box-2 .item.right {
  margin-right: 9.5%;
  float: right;
}

.page-home .box-2 .item.right .bc {
  background-image: url(../images/hand.png)
}

.page-home .common-box-1>.common-box-1-item {
  height: 32vw;
  position: relative;
  display: table;
  width: 100%
}

.page-home .common-box-1>.common-box-1-item .content {
  display: table-cell;
  vertical-align: middle
}

.page-home .common-box-1>.common-box-1-item .content .title>span {
  font-family: AvenirNext-DemiBold, Arial, Helvetica, sans-serif;
  font-size: 2.36111vw;
  color: #0b1531
}

.page-home .common-box-1>.common-box-1-item .content .yello-bar {
  width: 3.47222vw;
  height: .69444vw;
  background: #ffb900;
  margin-top: 1.38889vw;
  margin-bottom: 3.47222vw
}

.page-home .common-box-1>.common-box-1-item .content .line {
  font-family: AvenirNext-Medium, Arial, Helvetica, sans-serif;
  font-size: 1.11111vw;
  color: #374567;
  line-height: 2.08333vw
}

.page-home .common-box-1>.common-box-1-item .bc {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  height: 28vw;
  width: 38.88889vw
}

.page-home .common-box-1>.common-box-1-item.common-box-1-item-left {
  background-color: #fff
}

.page-home .common-box-1>.common-box-1-item.common-box-1-item-left .content {
  padding-left: 59.44444vw
}

.page-home .common-box-1>.common-box-1-item.common-box-1-item-left .bc {
  position: absolute;
  top: 1.38889vw;
  left: 9.58333vw
}

.page-home .common-box-1>.common-box-1-item.common-box-1-item-right .content {
  padding-left: 9.58333vw
}

.page-home .common-box-1>.common-box-1-item.common-box-1-item-right .bc {
  position: absolute;
  top: 1.38889vw;
  right: 1.58333vw
}

.page-home .common-box-1>.common-box-1-item:first-child .bc {
  background-image: url(../images/air.png)
}

.page-home .common-box-1>.common-box-1-item:nth-child(2) .bc {
  background-image: url(../images/pencel.png)
}

.page-home .common-box-1>.common-box-1-item:nth-child(3) .bc {
  background-image: url(../images/9@3x.png)
}

.page-home .common-box-1>.common-box-1-item:nth-child(4) .bc {
  background-image: url(../images/10@3x.png)
}