* { margin: 0; padding: 0; outline: none; }
*:not(input, textarea) { -webkit-touch-callout: inherit; -webkit-user-select: auto; }
body { width: 100%; font-family: Hiragino Sans GB, Arial, Helvetica, "宋体", sans-serif; font-size: 14px; color: #878787; -webkit-touch-callout: inherit; -webkit-user-select: auto; background-color: #fff; }
a { color: #878787; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
a:hover { text-decoration: none; }
button, input, select, textarea { font-size: 100%; margin: 0; padding: 0; outline: none; }
dt, dd { display: inline-block; }
textarea, input { resize: none; outline: none; }
textarea { resize: none; -webkit-appearance: none; }
ul, ol, li { list-style: none; }
em { font-style: normal; }

body { overflow: hidden; font-family:Microsoft YaHei,Airal; font-size:.26rem; color:#530d02; }
.page { width: 100%; height: 100%; position: absolute; }
.memoirs-current { z-index: 1; }
.hide { display: none; }
.arrow-up { height: auto; width: 25px; position: absolute; left: 50%; top: 92%; margin-left: -12px; z-index: 99; }
.arrow-down { top: 2%; left: 50%; margin-left: -12px; }

.page { margin:0 auto; background-size: cover; background-position: center center; background-repeat: no-repeat; max-width:7.2rem; }
.memoirs-1{ background-image:url(https://png.pookcdn.net/website_img/net/2016/bg_01.jpg);}
.memoirs-2,.memoirs-3,.memoirs-4,.memoirs-5,.memoirs-6,.memoirs-7,.memoirs-8{  background-image:url(https://png.pookcdn.net/website_img/net/2016/bg_02.jpg); }
.memoirs-9,.memoirs-10{ background-image:url(https://png.pookcdn.net/website_img/net/2016/bg_03.jpg);}

.memoirs-1 .logo{ top:.24rem; left:.28rem; width:1.73rem; height:.93rem; background:url(https://png.pookcdn.net/website_img/net/2016/logo.png) no-repeat; background-size:100% 100%;}
.memoirs-1 .title{ top:1.33rem; left:.33rem; width:6.56rem; height:2.46rem; background:url(https://png.pookcdn.net/website_img/net/2016/txt_title.png) no-repeat; background-size:100% 100%;}
.memoirs-1 .date{ top:4.13rem; left:.38rem; width:5.89rem; height:.77rem; background:url(https://png.pookcdn.net/website_img/net/2016/bg_date.png) no-repeat; font-size:.45rem; line-height:.77rem; font-weight:bold; color:#f04646; text-indent:.07rem; letter-spacing:1px; background-size:100% 100%;}

.memoirs-1 .memoirs-txt{ top:5.36rem; left:.36rem; letter-spacing:1px; z-index:100;}
.memoirs-1 .memoirs-txt li{ margin-bottom:.26rem; font-weight:bold;}
.memoirs-1 .memoirs-txt img{ margin:-.04rem .2rem 0 0; width:.3rem; height:.36rem;}

.memoirs-9 .fraction_title{ top:.46rem; left:50%; margin-left:-2.87rem; width:5.75rem; height:.95rem; background:url(https://png.pookcdn.net/website_img/net/2016/fraction_title.png) no-repeat; background-size:100% 100%;}
.memoirs-9 .fraction{ top:1.5rem; left:0; width:100%; font-size:1rem; color:#fff798; text-align:center;}
.memoirs-9 .txt_speech{ top:3.6rem; left:1.22rem; width:5.67rem; height:3.61rem; background:url(https://png.pookcdn.net/website_img/net/2016/txt_speech.png) no-repeat; background-size:100% 100%;}
.memoirs-9 .stamp{ top:6.4rem; left:.73rem; width:3.71rem; height:3.15rem; background:url(https://png.pookcdn.net/website_img/net/2016/bg_stamp.png) no-repeat; background-size:100% 100%;}
.memoirs-9 .stamp span{ display:block; margin:.8rem 0 0 1.1rem; font-size:.68rem; color:#54003d; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); -ms-transform:rotate(-20deg); -o-transform:rotate(-20deg); transform:rotate(-20deg);}
.memoirs-9 .txt_blessing{ top:.66rem; left:1.49rem; width:4.1rem; height:1.77rem; background:url(https://png.pookcdn.net/website_img/net/2016/txt_blessing.png) no-repeat; background-size:100% 100%;}
.memoirs-9 .btn_fraction{ bottom:.2rem; left:1.9rem; width:3.57rem; height:1.08rem; background:url(https://png.pookcdn.net/website_img/net/2016/btn_fraction.png) no-repeat; background-size:100% 100%;}
.memoirs-9 .btn_download{ bottom:1.2rem; left:1.9rem; width:3.57rem; height:1.08rem; background:url(https://png.pookcdn.net/website_img/net/2016/btn_download.png) no-repeat; background-size:100% 100%;}

.character{ bottom:0; right:0; }
.memoirs-1 .character{ width:4.29rem; height:4.18rem; background:url(https://png.pookcdn.net/website_img/net/2016/character_01.png) no-repeat; background-size:100% 100%;}
.memoirs-2 .character{ width:6.92rem; height:6.27rem; background:url(https://png.pookcdn.net/website_img/net/2016/character_02.png) no-repeat; background-size:100% 100%;}
.memoirs-3 .character{ width:7.13rem; height:7.82rem; background:url(https://png.pookcdn.net/website_img/net/2016/character_03.png) no-repeat; background-size:100% 100%;}
.memoirs-4 .character{ width:6.73rem; height:6.88rem; background:url(https://png.pookcdn.net/website_img/net/2016/character_04.png) no-repeat; background-size:100% 100%;}
.memoirs-5 .character{ width:6.97rem; height:7.68rem; background:url(https://png.pookcdn.net/website_img/net/2016/character_05.png) no-repeat; background-size:100% 100%;}
.memoirs-6 .character{ width:7.2rem; height:10.24rem; background:url(https://png.pookcdn.net/website_img/net/2016/character_06.png) no-repeat; background-size:100% 100%;}
.memoirs-7 .character{ width:7.2rem; height:6.25rem; background:url(https://png.pookcdn.net/website_img/net/2016/character_07.png) no-repeat; background-size:100% 100%;}
.memoirs-8 .character{ width:7.2rem; height:6.42rem; background:url(https://png.pookcdn.net/website_img/net/2016/character_08.png) no-repeat; background-size:100% 100%;}



.memoirs-title{ top:.75rem; left:.64rem; width:5.31rem; height:1.36rem; }
.memoirs-title img{ width:5.31rem; height:1.36rem;}

.statistics{ top:2.5rem; left:.64rem; width:100%; font-size:.43rem; color:#414142; z-index:100;}
.statistics span{ margin:0 .2rem; font-size:.84rem; color:#14a3e7;}


.statistics_02{ top:2.6rem; left:.6rem; font-size:.71rem; color:#14a3e7; z-index:100;}

.praise{ font-size:.28rem; color:#414142; text-align:center;}
.praise span{ display:block; font-size:.21rem;}
.memoirs-2 .praise{ bottom:6.26rem; left:3.73rem; }
.memoirs-3 .praise{ bottom:6.12rem; left:5.1rem; }
.memoirs-4 .praise{ bottom:6rem; left:4.76rem; }
.memoirs-5 .praise{ bottom:6.28rem; left:.7rem; }
.memoirs-6 .praise{ bottom:6.45rem; left:3.7rem; }
.memoirs-7 .praise{ bottom:6rem; left:3rem; }
.memoirs-8 .praise{ bottom:5.9rem; left:4.9rem; }


.pup{position:fixed;top:25%;left:5%;width:90%;padding-bottom:20px;background-image:linear-gradient(to bottom,#FAFAFA,#E3E3E3);background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#FAFAFA),to(#E3E3E3));border-radius:6px;z-index: 99;}
.pup .btn_close{position:absolute;right:0;top:0;width:30px;height:30px;font-size:30px;line-height:1;color:#fff;text-align:center;border-radius:0 6px;background-color:#999;}
.pup .title1{font-size: 16px; line-height:3;font-family: Microsoft YaHei;text-align: center;}
.pup .step{width:75%;margin:0 auto;}
.pup .step p{margin-bottom:10px;}
.pup .step p:last-child{margin-bottom:0;}
.pup .user_info_input{width:80%;height:35px;padding:0 10px;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-sizing: border-box;}
.pup .btn_submit{display:block;width:123px;margin:20px auto 0;padding:9px 0;font-size:19px;line-height:1;font-family:"Microsoft YaHei";color:#fff;text-align:center;text-shadow:1px 1px #145e7d;background-image:linear-gradient(to bottom,#34a2cf,#016792);background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#34a2cf),to(#016792));border-radius:.06rem;}
.pup .tip{width:75%;margin:20px auto 0;}
.pup .tip h4{font-size:14px;color:#0289f1;}
.pup .tip p{font-size:12px;color:#666;}

/* loading */
#loading { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: white; background: #5fc4d6; font-size: 1em; text-align: center; overflow: hidden; z-index: 9999; }
.spinner { margin: 0 auto; width: 60px; height: 60px; position: relative; top: 40%; }
.container1 > div, .container2 > div, .container3 > div { width: 15px; height: 15px; background-color: #fff; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.spinner .spinner-container { position: absolute; width: 100%; height: 100%; }
.container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
.container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); }
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }

.container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }
 @-webkit-keyframes bouncedelay {  0%, 80%, 100% {
-webkit-transform: scale(0.0)
}
 40% {
-webkit-transform: scale(1.0)
}
}
 @keyframes bouncedelay {  0%, 80%, 100% {
 transform: scale(0.0);
 -webkit-transform: scale(0.0);
}
40% {
 transform: scale(1.0);
 -webkit-transform: scale(1.0);
}
}