/* WP默认的是1200居中。改写为100% */
.mk-grid, .mk-inner-grid{
  max-width: 100%;
}
/* 头部样式 */
#nav_wapper {
  background: rgb(27, 38, 83, 0);
  position: fixed;
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
}
#nav_wapper:hover {
  background: rgb(27, 38, 83, 0.95) !important;
}
.banner-01{
  position: absolute;
  width: 100%;
  height: 520px;
  top: 0;
  left: 0;
  background: url(../../images/product_gsxcx/banner.png)no-repeat center;
}
#wapper_banner{
  position: relative;
  width: 100%;
  height: 520px;
}
.steps,
.qrcode {
  min-width: 1200px;
}
.banner-content {
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translateY(-50%);
}
.banner-content > p {
  font-family: PingFangSC-Medium;
  font-size: 40px;
  line-height: 40px;
  color: #fff;
  letter-spacing: 0;
  margin: 50px 0;
}
.banner-content > input {
  height: 48px;
  width: 75%;
  border: none;
  border-radius: 1px;
}
.banner-content > input[type=button] {
  width: 20%;
  color: white;
  background: #00CCC5;
  border-radius: 1px;
}
.steps {
  width: 100%;
  min-height: 520px;
  padding: 50px 0;
}
.steps > p {
  font-family: PingFangSC-Regular;
  font-size: 30px;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  line-height: 48px;
}

.steps-tabs {
  width: 60%;
  margin: 50px 20%;
}
.steps-tabs > span {
  display: inline-block;
  height: 60px;
/*   background-color: yellow; */
  width: 24%;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 20px;
  color: #212121;
  letter-spacing: 0;
  line-height: 48px;
  cursor: pointer;
  position: relative;
}
.steps-tabs > span:hover {
  color: #00CCC5;
}
.steps-tabs > span::after,
.active-tab::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #00CCC5;
}
.steps-tabs > span::after {
  transform: scaleX(0);
  transition: transform .5s;
}
.steps-tabs > span:hover::after {
  transform: scaleX(1);
}
.active-tab::after {
  transform: scaleX(1) !important;;
}


.step-detail {
  width: 100%;
  height: 624px;
  position: relative;
  overflow: hidden;
  background-color: #f9fafd;
}
.step-detail > div {
  width: 60%;
  margin-left: 20%;
  height: 100%;
  padding: 50px 0;
  position: relative;
}
@media screen and (max-width: 1660px) {
  .step-detail > div {
    width: 80%;
    margin-left: 10%;
  }
}
.step-detail > div > img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.step-detail > div > p {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #666666;
  letter-spacing: 0;
  line-height: 32px;
  position: relative;
  top: 28%;
}
.step-detail > div > h3 {
  position: relative;
  top: 25%;
  line-height: 48px;
}
.step-detail::before,
.step-detail::after {
  content: '';
  display: block;
  position: absolute;
  width: 30%;
  height:100%;
  background-color: #979797;
  opacity: 0.02;
  transform: rotate(-330deg);
}
.step-detail::before {
  left: -20%;
  top: -30%;
}
.step-detail::after {
  right: -20%;
  bottom: -30%
}

.qrcode {
  width: 100%;
  min-height: 520px;
  background: url(../../images/product_gsxcx/%c3%83%c2%a4%c3%82%c2%ba%c3%85%c2%92%c3%83%c2%a7%c3%82%c2%bb%c3%82%c2%b4%c3%83%c2%a7%c3%82%c2%a0%c3%82%c2%81%c3%83%c2%a8%c3%86%c2%92%c3%85%c2%92%c3%83%c2%a6%c3%a2%c2%84%c2%a2%c3%82%c2%af.html) no-repeat center;
  padding: 50px 0;
}
.qrcode > div {
  width: 60%;
  margin-left: 20%;
}
.qrcode > div > div {
  width: 50%;
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qrcode p:not(:last-child) {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  line-height: 24px;
}
.qrcode p:last-child {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #666666;
  letter-spacing: 0;
  line-height: 24px;
}

/* 每个步骤页的进入动画 */
.fadeIn {
  display: block;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(35%);
  } to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(35%);
  } to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(35%);
  } to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(35%);
  } to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 1026px) {
  html {
    min-width: unset;
  }
  .banner-01 {
    background: url(../../images/product_gsxcx/banner-mobile.png) no-repeat center;
    background-size: contain;
    height: 280px;
  }
  .banner-content {
    left: 10%;
    top: 40%;
  }
  .banner-content > p {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 24px;
    margin: 10px 0;
  }
  .banner-content > input {
    height: 32px;
  }
  #wapper_banner {
    height: 280px;
  }
  .step-detail {
    height: unset;
    margin-top: 50px;
  }
  .steps-tabs,
  .step-detail::before,
  .step-detail::after {
    display: none;
  }
  .steps,
  .qrcode {
    min-width: unset;
  }
  .steps {
    padding: unset;
  }
  .step-detail > div {
    display: block !important;
    min-height: 560px;
    width: 100%;
    margin-left: 0;
    padding: 50px;
  }
  .step-detail > div:nth-child(2),
  .step-detail > div:nth-child(4){
    background-color: white;
  }
  .step-detail > div > img {
    transform: translateY(-30%);
  }
  .qrcode {
    background: #f2f7ff;
    padding: 20px;
  }
  .qrcode > div {
    width: 100%;
    margin-left: 0;
  }
  .qrcode > div > div {
    float: unset;
    width: 100%;
    margin: 50px 0;
  }
}

/**
* iphone 5 & iphone SE & Galaxy S9 ...
*/
@media screen and (max-width: 361px) {
  .banner-01 {
    height: 250px;
  }
}

/**
* ipad pro ~
*/
@media screen and (min-width: 415px) and (max-width: 1026px) {
  .banner-01 {
    height: 390px;
    background-size: cover;
  }
  .step-detail > div {
    min-height: 800px;
  }
}