body {
  min-width: 320px;
}
* {
  box-sizing: border-box;
}

.banner-warpper {
  position: relative;
  height: 800px;
  overflow: hidden;
  background: #1a1a1a;
  color: #fff;
}
.main-content {
  margin: 0 auto;
  max-width: 980px;
  padding: 0 22px;
  position: relative;
  z-index: 2;
}

@-webkit-keyframes movetop {
  0% {
    top: 0;
  }
  100% {
    top: -1557.5px;
  }
}
@keyframes movetop {
  0% {
    top: 0;
  }
  100% {
    top: -1557.5px;
  }
}

@-webkit-keyframes movedown {
  0% {
    bottom: 1557.5px;
  }
  100% {
    bottom: 0;
  }
}
@keyframes movedown {
  0% {
    bottom: 1557.5px;
  }
  100% {
    bottom: 0;
  }
}

.banner-warpper .code {
  margin-top: 120px;
  font-size: 56px;
}
.banner-warpper .first {
  font-weight: lighter;
}
.banner-warpper .sub {
  margin-top: 20px;
}
.banner-warpper .sub span {
  color: #de4444;
}
.banner-warpper .code-img {
  display: inline-block;
  text-align: center;
  margin-top: 40px;
}
.banner-warpper .code-img img {
  display: block;
  margin-bottom: 20px;
}
.banner-warpper .code-img em {
  font-style: normal;
  font-size: 16px;
}
.vx-code .temple {
  position: relative;
  padding-left: 165px;
}
.vx-code .logo {
  position: absolute;
  top: 6px;
  left: 0;
  display: inline-block;
  width: 145px;
  height: 145px;
  vertical-align: middle;
}

.slide-warrper {
  overflow: hidden;
  -webkit-transform: rotate(25deg);
  -o-transform: rotate(-65deg);
  -ms-transform: rotate(-65deg);
  -moz-transform: rotate(-65deg);
  transform: rotate(25deg);
  position: absolute;
  right: 23%;
  top: -24%;
}
.slide-warrper li {
  height: 3115px;
  position: relative;
  display: inline-block;
}
.slide-warrper li.top {
  -webkit-animation: 18s movetop infinite linear;
  animation: 18s movetop infinite linear;
}
.slide-warrper li.down {
  -webkit-animation: 18s movedown infinite linear;
  animation: 18s movedown infinite linear;
}
.slide-warrper li img {
  width: 280px;
  height: auto;
  display: block;
}

.home-warpper {
  padding-top: 130px;
  position: relative;
  text-align: center;
}

.home-warpper .inline-con {
  display: inline-block;
  position: relative;
}
.home-warpper .text {
  font-size: 50px;
  margin-bottom: 40px;
  text-align: left;
}
.home-warpper .text .tl {
  padding-bottom: 12px;
}
.home-warpper .text .sub {
  font-size: 16px;
  color: #999;
}

.home-warpper .page {
  margin-bottom: 70px;
  width: 300px;
  height: 598px;
  margin-left: 560px;
}

.home-warpper .home-page {
  margin-top: -180px;
}
.home-warpper .edit-page {
  position: absolute;
  top: 350px;
  margin-left: 70px;
}
.home-svg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 630px;
}

.found-svg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 600px;
}

.found-warpper {
  background: #1a1a1a;
  color: #fff;
  padding: 110px;
  position: relative;
  text-align: center;
}
.found-warpper .title {
  font-size: 50px;
  margin-bottom: 20px;
}
.found-warpper .sub-title {
  font-size: 16px;
}

.found-warpper .page-show {
  display: inline-block;
  margin-top: 150px;
}
.found-warpper .page {
  width: 300px;
  height: 598px;
  display: inline-block;
}
.found-warpper .friend-cicle {
  margin-left: 120px;
}

.diary-album {
  position: relative;
  padding: 110px;
}
.diary-album .main-content {
  text-align: center;
}
.diary-album .diary-con {
  display: inline-block;
  margin: 0 auto;
}
.diary-album .diary-txt {
  vertical-align: top;
  display: inline-block;
  text-align: left;
  font-size: 50px;
  color: #0e0d1b;
}
.diary-album .sub {
  font-size: 16px;
  margin-top: 20px;
  color: #999;
}
.diary-album .diary-txt img {
  margin-top: 60px;
  width: 279px;
}
.diary-album .page {
  width: 300px;
  height: 600px;
  margin-left: 68px;
  display: inline-block;
}

.footer {
  padding: 81px;
  padding-bottom: 0;
  background: rgba(43, 43, 43, 1);
  color: #fff;
}
.footer .code {
  width: 30%;
  text-align: center;
  display: inline-block;
}
.footer .code img {
  display: inline-block;
  margin-bottom: 10px;
}
.footer .code em {
  font-style: normal;
  display: block;
  width: 100%;
  font-size: 16px;
}

.footer .wisdom {
  width: 59%;
  display: inline-block;
  text-align: right;
  vertical-align: top;
  margin-top: 60px;
}
.footer .wisdom .sentence {
  font-size: 24px;
}
.footer .wisdom .author {
  font-size: 16px;
  margin-top: 20px;
}
.footer .record {
  text-align: center;
  color: #999999;
  padding: 60px;
  padding-bottom: 20px;
  font-size: 11px;
}