.examples {
  padding: 1rem 0 .6rem;
  background-color: #f1f6fa;
  box-sizing: border-box;
  min-height: calc(100vh - 3rem);
}

.examples.wechat {
  min-height: calc(100vh - 1rem);
}

.examples-title:after {
  letter-spacing: .1rem;
  text-indent: .1rem;
  word-spacing: .12rem;
}

.examples-types {
  width: 6.9rem;
  margin: .4rem auto .11rem;
  display: flex;
  justify-content: space-between;
}

.examples-types {
  border-radius: 4px;
  overflow: hidden;
}

.examples-types li {
  width: 1.65rem;
  line-height: .6rem;
  background-color: #fff;
  text-align: center;
  color: #616881;
  font-size: .26rem;
  position: initial!important;
}

.examples-types li.cur {
  color: #fff;
  background-color: #3f81f1;
}

.examples-list {
  width: 6.9rem;
  margin: 0 auto;
  padding-bottom: .66rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.examples-list li {
  width: 3.35rem;
  position: relative!important;
}

.examples-list li {
  margin-top: .39rem;
}

.examples-list img {
  display: block;
  width: 100%;
  height: 2.25rem;
}

.examples-list p {
  font-size: .26rem;
  line-height: .48rem;
  padding-top: .16rem;
  color: #586696;
  text-align: center;
}

.examples-pages {
  display: flex;
  justify-content: center;
}

.examples-prev, .examples-next {
  width: 2.16rem;
  line-height: .5rem;
  height: .5rem;
  margin: 0 .25rem;
  text-align: center;
  font-size: .24rem;
  border: 1px solid #616881;
  color: #616881;
  border-radius: 3px;
  box-sizing: border-box;
  transition: all .3s;
}

.examples-prev:hover, .examples-next:hover {
  color: #fff;
  background-color: #3f81f1;
  border-color: transparent;
  text-decoration: none;
}

.examples-loading {
  margin: 0 auto;
  width: .5rem;
  height: .5rem;
  background: transparent url(../img/loading.svg) no-repeat 0 0/100%;
  animation: rotateZ 1.5s infinite linear;
  display: none;
}

.examples-loading.show {
  display: block;
}

.examples-nomore {
  font-size: .26rem;
  text-align: center;
  display: none;
  color: #918e91;
}

.examples-loading.show,  .examples-nomore.show{
  display: block;
}


@keyframes rotateZ {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}