@charset "utf-8";

* {
  /**
   * 简单粗暴, 一劳永逸的写法
   */
  padding: 0;
  margin: 0;
  font: inherit;
  vertical-align: baseline;
}

* {
  /*
   * 这个属性只用于iOS, 当你点击一个链接或者通过Javascript定义的可点击元素的时候
   * 它就会出现一个半透明的灰色背景
  */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  -webkit-text-size-adjust: 100%;
  /* 禁止字体变化 */
}

body {
  font-size: 14px;
  font-weight: 400;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1;
  -webkit-overflow-scrolling: touch;
  /* 设置滚动容器的滚动效果 */
  -webkit-font-smoothing: antialiased;
  /* 字体抗锯齿渲染 */
}

a,
a:active,
a:hover {
  /**
   * 某些浏览器会给 a 设置默认颜色
   */
  color: unset;
  text-decoration: none;
}

ol,
ul,
li {
  /**
   * 去掉列表样式
   */
  list-style: none;
}

img {
  border: 0;
  vertical-align: middle
}

table {
  /**
   * 去掉 td 与 td 之间的空隙
   */
  border-collapse: collapse;
  border-spacing: 0;
}

input,
textarea,
select {
  outline: none;
  /*去掉fouce时边框高亮效果*/
  background: unset;
  /*去掉默认背景*/
  appearance: none;
  -webkit-appearance: none;
  /* 去除ios输入框阴影 */
}

/* 禁止选中文本内容 */
*:not(input, select, textArea) {
  -webkit-user-select: none;
}

* img {
  max-width: 100%;
}

header {
  width: 2.05rem;
  height: .84rem;
  margin: 0 auto;
  text-align: center;
  padding-top: 0.5rem;
}

.slogn {
  width: 6.24rem;
  height: .73rem;
  margin: 0 auto;
  margin-top: .41rem;
}

.list {
  height: 6.64rem;
  width: 98%;
  margin: .5rem auto 0;
  display: flex;
  justify-content: space-between;
}

.list .item {
  width: 1.81rem;
}

.list .item:nth-child(odd) {
  margin-top: 1.1rem;
}

@keyframes bounce {
  0% {
    transform: translate3d(0, 0, 0);
    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
  }

  100% {
    transform: translate3d(0, -1em, 0);
    text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
  }
}

.list .item:nth-child(odd) .ico {
  animation-delay: 0.3333333333s;
}

.list .item .ico {
  width: 1.05rem;
  height: 1.22rem;
  margin: 0 auto;
  animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
  transform: translate3d(0, 0, 0);
}

.list .item .square {
  width: 1.56rem;
  height: 2.58rem;
  margin: 0 auto;
  background: url("../img/square.png") no-repeat center top;
  background-size: contain;
}

.list .item .con {
  text-align: center;
}

.list .item .con .t {
  font-size: .32rem;
  font-weight: bold;
  color: #0039df;
}

.list .item .con .c {
  line-height: .3rem;
  font-size: .20rem;
}

.down {
  margin-top: .72rem;
  background: #002ff0;
  border-radius: .2rem;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  color: #FFF;
  font-size: .4rem;
  width: 5.19rem;
  height: .84rem;
  /*animation: rotate 0.3s ease infinite;*/
}
@keyframes rotate {
  0% {
      transform: rotate(0);
  }

  20% {
      transform: rotate(-2deg);
  }

  60% {
      transform: rotate(0);
  }

  80% {
      transform: rotate(2deg);
  }

  100% {
      transform: rotate(0);
  }
}

.down a {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.down img {
  width: .39rem;
  height: .47rem;
  margin-right: .22rem;
  display: block;
}

.down span {
  height: .47rem;
  line-height: .47rem;
  font-weight: bold;
  display: block;
}

.copy {
  font-size: .22rem;
  text-align: center;
  line-height: .64rem;
}

.info {
  margin: 0 auto;
  width: 5.89rem;
  text-align: left;
  text-indent: -1em;
  line-height: .58rem;
}

.tel {
  text-align: center;
  font-weight: bold;
  margin-top: .86rem;
  color: #002ff0;
  font-size: .26rem;
  padding-bottom: 0.8rem;
}



        /* 加上 -webkit- 注意兼容 */
        .down span {
          background: -webkit-linear-gradient(135deg,
                  #edfff7,
                  #ffe3f4 25%,
                  #e0f9ff 50%,
                  #fffde8 55%,
                  #f6feff 60%,
                  #f6ebff 80%,
                  #ffeef2 95%,
                  #eefffc);
          /* 文字颜色填充设置为透明 */
          -webkit-text-fill-color: transparent;
          /* 背景裁剪，即让文字使用背景色 */
          -webkit-background-clip: text;
          /* 背景图放大一下，看着柔和一些 */
          -webkit-background-size: 200% 100%;
          /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
          -webkit-animation: flowCss 6s infinite linear;
      }

      @-webkit-keyframes flowCss {
          0% {
              /* 移动背景位置 */
              background-position: 0 0;
          }

          100% {
              background-position: -400% 0;
          }
      }

      .down span:hover {
          -webkit-animation: flowCss 2s infinite linear;
      }