*{-webkit-box-sizing:border-box;box-sizing:border-box; }
html,body{height: 100%}
.container {position:relative;height: 100%;width: 100%;overflow: hidden;}
.pages,.page2 {position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background-color:#fffdf4;}
.page2:first-child {z-index: 10;}

/*animation*/
 .u-arrow-bottom {position: absolute;bottom: 3rem;left: 50%;z-index: 150;width: 2.4rem;height: 1.4rem;margin-left: -0.7rem;}
    .pre-wrap {width: 2.4rem;height: 1.4rem;position: relative;}
      .pre-box1, .pre-box2 {height: 1.5rem;width: 1.1rem;position: absolute;top: -0.5rem;overflow: hidden;}
      .pre-box2 {left: 1rem;}
        .pre1, .pre2 {background-color: #fdd376;width:1.4rem;height:0.5rem;border-radius: 0.2rem;position: absolute;box-shadow: 0.1rem -0.1rem  0.1rem #646464;top: 0.5rem;}
        .pre1 {transform: rotate(130deg);-webkit-transform: rotate(130deg);left: 0.1rem;}
        .pre2 {left: -0.45rem;-webkit-transform: rotate(50deg);transform: rotate(50deg);}
@-webkit-keyframes anim {
  0%{opacity:0;-webkit-transform:translate(0,20px);}
  30%{opacity:0;-webkit-transform:translate(0,20px);}
  60%{opacity:1;-webkit-transform:translate(0,0);}
  100%{opacity:0;-webkit-transform:translate(0,-16px);}
}
@keyframes anim {
  0%{opacity:0;transform:translate(0,20px);}
  30%{opacity:0;transform:translate(0,20px);}
  60%{opacity:1;transform:translate(0,0);}
  100%{opacity:0;transform:translate(0,-16px);}
}

@-webkit-keyframes scale-in-ani {
  0% {opacity: 0;-webkit-transform: scale(5) rotate(-15deg);}
  100% {opacity: 1;-webkit-transform: scale(1) rotate(0);}
}
@keyframes scale-in-ani {
  0% {opacity: 0;transform: scale(5) rotate(-15deg);}
  100% {opacity: 1;transform: scale(1) rotate(0);}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-webkit-keyframes rubberBand {
  0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
  30% {opacity:1;-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}
  40% {opacity:1;-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}
  50% {opacity:1;-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}
  65% {opacity:1;-webkit-transform: scale3d(.95, 1.05, 1);transform: scale3d(.95, 1.05, 1);}
  75% {opacity:1;-webkit-transform: scale3d(1.05, .95, 1);transform: scale3d(1.05, .95, 1);}
  100% {opacity:1;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}
@keyframes rubberBand {
  0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
  30% {opacity:1;-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}
  40% {opacity:1;-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}
  50% {opacity:1;-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}
  65% {opacity:1;-webkit-transform: scale3d(.95, 1.05, 1);transform: scale3d(.95, 1.05, 1);}
  75% {opacity:1;-webkit-transform: scale3d(1.05, .95, 1);transform: scale3d(1.05, .95, 1);}
  100% {opacity:1;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}
.page2 .scale_ani{display: none}
.page2 .pre-wrap{display: none}
.page2 .rubberBand{opacity:0}
.page2.current .pre-wrap{
	display: block;
	-webkit-animation:anim 1.5s  infinite ease-in-out;
	animation:anim 1.5s infinite ease-in-out;
}
.page2.current .scale_ani {
  display: block;
  -webkit-animation: scale-in-ani 0.5s ease-in 0.3s both;
  animation: scale-in-ani 0.5s ease-in 0.3s both;
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.page2.current .rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
  animation-delay:0.5s;
}

/*END*/

.music_icon {position: absolute;top: 20px;right: 20px;z-index: 100;height:51px;width:51px;background-position:-63px -349px;}
.music_icon.on {background-position:0 -349px;}

/*page1*/
/*.p1{background:url(../images/HPV/1.jpg) no-repeat center center;background-size:cover }*/
.p3_btn:active,.p5_btn1:active,.p5_btn2:active{opacity: 0.6}
.p3_btn{position:absolute;color:#735838;background-color:#ffd13f;text-align: center;border-radius: 3px;display: none;cursor: pointer;}
.p5_btn1{position:absolute;left:50%;color:#735838;background-color:#ffd13f;text-align: center;border-radius: 3px;border-radius:3px;display: none;cursor: pointer;}
.p5_btn2{position:absolute;left:50%;color:#ffffff;background-color:#309ee7;text-align: center;border-radius: 3px;border-radius:3px;display: none;cursor: pointer;}

.page2{text-align: center;font-family: 'Microsoft Yahei';font-size: 0;}
.page_box{position: relative;display: inline-block;height: 100%}
.page_img{height:100%;max-width: 100%;}

/*浮层*/
.layer{position: fixed;top:0;left:0;right:0;bottom:0;margin:0 auto; max-width: 640px;background-color:rgba(0,0,0,0.5);z-index: 100;display: none}
.layer.active{display: block}
  .layer_close2{position: absolute;top:0;right:0.5rem;font-size:2.3rem;color:#969696;cursor: pointer;}
  .layer_box{background-color: #fff;width: 30rem;margin:0 auto;border-radius: 0.3rem;padding:1.5rem 0.5rem;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);position:absolute;top:50%;left:50%;z-index: 100;}

.form{padding:0 1.5rem;}
  .form_tit{color:#3c3c3c;font-size: 1.6rem;text-align: center;padding-bottom:0.3rem;}
    .form_item{margin-top:1rem;}
      .form_label{display:block;color:#969696;font-size: 1.2rem;line-height: 3rem;width:8.8rem }
        .form_label>span{color:#ff0000;}
      .form_input{display: block;width: 100%;height: 3rem;padding:0.3rem 1rem;-webkit-box-shadow:none;box-shadow:none;background: #fff;border:0.1rem solid #d4d4d4;border-radius: 0.3rem;font-size: 1.2rem;-webkit-appearance:none;}
    .form_tips{color:#3c3c3c;font-size: 1.2rem;margin-top:0.3rem;}
      .form_tips>span{}
    .from_btn{display:block;font-size: 1.4rem;color:#fff;background-color:#309ee7;line-height: 3.3rem;text-align: center;border-radius: 0.3rem;margin:1.5rem 0 0.8rem;}

.mod_tips{z-index: 3000;min-width: 6rem;font-size: 1.4rem;padding:0.75rem 1rem;border-radius: 0.3rem}

.ready{position:relative;height: 100%;width: 100%;background-color:#0e85ce }
  .ready_img{position:absolute;left:50%;top:50%;width: 8.4rem;height: 7.2rem;margin-left:-4.2rem;margin-top:-5rem;}
  .ready_txt{font-size:1.5rem;top:50%;position: absolute;width: 100%;left: 0;color: #fff;text-align: center;z-index: 999;margin-top:3rem;}