body {

  margin: 0;

}

.pulse {

  font-size: 15px;

  color: #fff;

  position: absolute;

  height: 38px;

  line-height: 38px;

  text-align: center;

  padding: 20px 25px;

  border: 1px solid #fff;

  background: rgba(255, 255, 255, 0.3);

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

  z-index: 1;

  opacity: 0;

  -webkit-animation: warn 3s ease-out;

  -moz-animation: warn 3s ease-out;

  animation: warn 3s ease-out;

  -webkit-animation-iteration-count: infinite;

  -moz-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

  box-shadow: 1px 1px 30px #efefef;

}

@keyframes warn {

  0% {

    transform: scale(0.3);

    -webkit-transform: scale(0.3);

    background: rgba(255, 255, 255, 0);

  }



  25% {

    transform: scale(0.4);

    -webkit-transform: scale(0.4);

    opacity: 0.1;

  }



  50% {

    transform: scale(0.5);

    -webkit-transform: scale(0.5);

    opacity: 0.5;

  }



  75% {

    transform: scale(1);

    -webkit-transform: scale(1);

    opacity: 0.8;

  }

  100% {

    transform: scale(1.5);

    -webkit-transform: scale(1.5);

    opacity: 0;

  }

}

.pulse1 {

  left: 14%;

  top: 24%;

}

.pulse2 {

  left: 50%;

  top: 17%;

}

.pulse3 {

  left: 28%;

  top: 30%;

}

.pulse4 {

  left: 25%;

  top: 62%;

}

.pulse5 {

  left: 44%;

  top: 57%;

}

.pulse6 {

  left: 64%;

  top: 50%;

}



.float_container {

  position: absolute;

  width: 50%;

  height: 100%;

  top: 10%;

  right: 5%;

  z-index: 999;

}

.right_online {

  width: 160px;

  height: 190px;

  position: fixed;

  z-index: 9999;

  background: #fff;

  box-shadow: 1px 0px 6px #999;

  text-align: center;

  border-radius: 10px;

  bottom: 300px;

  right: 0;

  box-sizing: border-box;

  color: #898989;

  font-size: 17px;

}

.right_online .online {

  width: 60px;

  display: block;

  margin: 26px auto 12px;

}

.right_online .arrow {

  margin-top: 20px;

  background: #d12928;

  text-align: center;

  width: 100%;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.right_online .arrow img {

  width: 25px;

}

.pc_web {

  display: block;

}

.mobile_web {

  display: none;

}

ul li {

  list-style-type: none;

}

a {

  text-decoration: none;

  color: #fff;

}

.w1200 {

  width: 1200px;

  margin: auto;

}

.banner_container {

  width: 100%;

  position: relative;

  z-index: 1;

}

.banner_container img {

  width: 100%;

}

.banner_container .nav_list {

  position: fixed;

  top: 15px;

  left: 0;

  width: 100%;

}

.banner_container .logo {


}



.banner_container .nav_list .w1200 {

  display: flex;

  justify-content: space-between;

}

.banner_container .nav {

  display: flex;

  color: #fff;

}

.banner_container .nav li {

  margin-right: 50px;

}

.second_title {

  font-size: 48px;

  text-align: center;

  margin: 90px 0;

}

.second_title span {

  color: #d12928;

}

.second_title::after {

  display: block;

  content: '';

  width: 50px;

  border: 1px solid #d12928;

  margin: auto;

}

.trait_container {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

}

.trait_container img {

  width: 325px;

}

.trait_container > div {

  text-align: center;

}

.trait_container .title {

  font-size: 24px;

  margin: 34px 0 22px 0;

}

.trait_container .info {

  width: 325px;

  font-size: 17px;

  color: #777;

  margin: auto;

}

.ios_container {

  display: flex;

  justify-content: space-between;

  margin-bottom: 142px;

}

.ios_more_container {

  margin-top: 265px;

}

.color_red {

  color: #d12928;

}

.ios_container .title {

  font-size: 48px;

  margin-bottom: 51px;

}



.ios_container .info {

  font-size: 17px;

  color: #595757;

  margin-bottom: 20px;

  line-height: 25px;

}

.info_title {

  font-size: 24px;

  margin-bottom: 20px;

}

.ios_container > div {

  width: 490px;

}



.advantage {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

}

.advantage img {

  width: 34px;

  vertical-align: middle;

}

.advantage > div {

  width: 339px;

  margin-bottom: 50px;

}

.f24 {

  font-size: 24px;

}

.advantage .info {

  margin-top: 27px;

  font-size: 18px;

  color: #777;

  line-height: 32px;

}

.sign_footer {

  background-color: #d12928;

  color: #fff;

  font-size: 18px;

  text-align: center;

  height: 245px;

  line-height: 245px;

  margin-top: -100px;

}

footer {

  font-size: 18px;

  line-height: 30px;

  padding-bottom: 67px;

}

footer .title {

  font-size: 48px;

  margin: 59px 0 47px 0;

}



footer .title::after {

  display: block;

  content: '';

  width: 50px;

  height: 20px;

  border-bottom: 1px solid #d12928;

}



/* 移动端 */

.mobile_web {

  min-width: 375px;

}

.mobile_web header img {

  width: 100%;

}

.mobile_web .second_title {

  /* font-size: 93px; */

  margin: 40px 0;

}

.trait_mobile > div {

  border: 2px solid #d12928;

  border-radius: 20px;

  text-align: center;

  padding: 20px;

  margin-bottom: 20px;

}

.trait_mobile > div img {

  width: 50px;

}

.trait_mobile .title {

  margin: 30px 0;

  /* font-size: 93px; */

}

.trait_mobile .info {

  color: #777;

  /* font-size: 70px; */

}



.mobile_container {

  padding: 40px;

}

.mobile_container .info {

  /* margin: 50px 0 60px 0; */

  /* font-size: 44px; */

  /* line-height: 100px; */

}

.mobile_container .ios_container img {

  display: block;

  margin: 50px auto 50px;

  width: 80%;

}

.mobile_container .ios_container .title {

  /* font-size: 90px; */

}

.mobile_container .ios_container {

  display: block;

  width: 100%;

}

.mobile_container .info_title {

  /* font-size: 58px; */

}

.mobile_container .ios_container > div {

  width: 100%;

  margin-bottom: 20px;

}

.mobile_container .advantage {

  display: block;

  width: 100%;

}

.mobile_container .advantage > div {

  width: 100%;

}

.mobile_container .advantage img {

  /* width: 88px; */

}

.app_sifn_mobile {

  margin: auto;

  display: block;

  width: 100%;

  box-shadow: 10px 10px 5px #d12928;

}

.app_sifn_mobile_info {

  /* font-size: 44px; */

  color: #fff;

  background: #d12928;

  padding: 120px 42px 54px 42px;

  margin-top: -100px;

}

.mobile_web footer {

  padding: 53px;

}

.mobile_web footer .info {

  color: #777777;

  /* line-height: 100px; */

}

.footer_mobile {

  background-image: linear-gradient(

    rgba(255, 0, 0, 0.1),

    rgba(255, 255, 255, 0.1)

  );

}

.footer_mobile img {

  width: 80%;

  display: block;

  margin: auto;

  padding: 20px;

  box-sizing: border-box;

}

.footer_shadow {

  width: 100%;

  height: 10px;

  margin-top: 20px;

}

.mobile_web header {

  position: relative;

}

.mobile_web header .logo {

  width: 80%;

  position: absolute;

  top: 72px;

  left: 47px;

}

.mobile_web .float_container {

  top: 10%;

  right: 35%;

}

.mobile_web .pulse {

  padding: 5px;

}

/* .mobile_web .right_online {

  width: 290px;

  height: 340px;

  font-size: 31px;

  position: fixed;

  z-index: 9999;

  background: #fff;

  box-shadow: 1px 0px 6px #999;

  text-align: center;

  border-radius: 10px;

  bottom: 300px;

  right: 0;

  box-sizing: border-box;

  color: #898989;

}

.mobile_web .right_online .arrow {

  margin-top: 50px;

  background: #d12928;

  text-align: center;

  width: 100%;

  height: 150px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.mobile_web .right_online .online {

  display: block;

  margin: 47px auto 22px;

} */

/* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*/

@media screen and (max-width: 1200px) {

  .ios_more_container {

    width: 1000px;

  }

}

/* 小屏幕 768px-992px*/

@media screen and (max-width: 992px) {

  .mobile_web {

    display: block;

  }

  .pc_web {

    display: none;

  }

  .mobile_web header .logo {

    width: 50%;

  }

  .mobile_container .ios_container img {

    width: 40%;

  }

  .footer_mobile img {

    width: 50%;

  }

  .trait_mobile > div {

    width: 70%;

    margin: 0 auto 30px;

  }

}



/* 注意：此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？

把超小屏幕的区间降低1px*/



/* 超小屏幕 768px屏幕以下*/

@media screen and (max-width: 767px) {

  .mobile_web {

    display: block;

  }

  .pc_web {

    display: none;

  }

  .mobile_web header .logo {

    width: 50%;

  }

  .mobile_container .ios_container img {

    width: 40%;

  }

  .footer_mobile img {

    width: 50%;

  }

  .trait_mobile > div {

    width: auto;

    padding: 20px;

    margin-bottom: 20px;

  }

}