/*全局样式*/
html { color: #000; background: #fff; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; touch-action: manipulation}
html * { outline: 0; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0,0,0,0)}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  margin: 0; padding: 0}
input,select,textarea { font-size: 100%}
table { border-collapse: collapse; border-spacing: 0}
fieldset,img { border: 0 }
abbr,acronym { border: 0; font-variant: normal}
del { text-decoration: line-through}
address,caption,cite,code,dfn,em,th,var { font-style: normal; font-weight: 500}
ol,ul { list-style: none}
caption,th { text-align: left}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 500}
q:before,q:after { content: ''}
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline}
sup { top: -.5em}
sub { bottom: -.25em}
ins,a { text-decoration: none}
*,*:before, *:after { box-sizing: border-box;}
body{ font-family: sans-serif; text-align: left; color: #000; font-size: 0.32rem; background: #f0f0f0;}
a:link,a:visited,a:hover,a:active,a:focus { text-decoration: none !important;}
img{ display: block; }
ul,ol{ list-style-type: none;}
.clearfix:after{ content: "."; display: block; height: 0; visibility: hidden; clear: both;}
.clearfix{zoom: 1;}
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .iphonex {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
input[type=button],input[type=submit],input[type=file],button,input,select,textarea { cursor: pointer; -webkit-appearance: none; outline: none; }
button{ border-radius: 0; }

/* 1px边框 */
.borderAll,.borderTop,.borderBottom,.borderLeft,.borderRight{ position: relative;}
.borderAll:after { content: " "; position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: left top; box-sizing: border-box; border: 1px solid #000; border-radius: 0;}
.borderTop::after { content: ''; position: absolute; background-color: #000; display: block; width: 100%; height: 1px; transform: scale(1, 0.5); top: 0; left: 0; }
.borderBottom::after { content: ''; position: absolute; background-color: #000; display: block; width: 100%; height: 1px; transform: scale(1, 0.5); bottom: 0; left: 0; }
.borderLeft::after { content: ''; position: absolute; background-color: #000; display: block; width: 1px; height: 100%; transform: scale(.5, 1); bottom: 0; left: 0; }
.borderRight::after { content: ''; position: absolute; background-color: #000; display: block; width: 1px; height: 100%; transform: scale(.5, 1); bottom: 0; right: 0; }
/*禁止安卓预览图片,img添加class="img"*/
.img{ pointer-events: none;}

/*通用*/ 
.wrap{ width: 10rem; margin: 0 auto; overflow-x: hidden; min-height: 100vh;}
.index{ width: 10rem; height: 100vh; background: url(./images/bg.jpg) no-repeat; background-size: 100% 100%; position: relative;}
.logo{ width: 2.96rem; position: absolute; left: 0; top: 0;}
.title{ width: 8.7733rem; position: absolute; left: 0; top: 7vh; right: 0; margin: auto;}
.main{ width: 10rem; height: 12.5rem; position: absolute; left: 0; top: 16vh; right: 0; margin: auto;}
.btn{ width: 5.1733rem; padding-bottom: 0.4rem; position: absolute; left: 0; top: calc( 16vh + 13rem); right: 0; margin: auto; }
.btn img.btnImg{ width: 5.1733rem; height: 1.56rem; animation: btnImg 1s linear infinite alternate;}
.btn img.hand{ width: 1.0533rem; position: absolute; top: 0.5867rem; right: -0.2667rem; animation: hand .5s linear infinite alternate;}
@keyframes btnImg{
  from{ transform: scale(1);}
  to{ transform: scale(.95);}
}
@keyframes hand{
  from{ transform: scale(1);}
  to{ transform: scale(.7);}
}
.rule{ width: 9.5733rem; position: absolute; left: 0; bottom: 0; right: 0; margin: auto;}
.mainpic{ width: 7.8133rem; position: absolute; left: 1.5rem; bottom: 3.5rem;
animation-name: wobble,fadeInUp;
animation-duration: 4s,1s;
animation-delay: 1s,0s;
animation-iteration-count: infinite,1;
}
.coins{width: 8.28rem; position: absolute; left: 0; top: 0.6667rem; right: 0; margin: auto; animation: coins 2s linear infinite alternate;}
@keyframes coins{
  from{ transform: translateY(0px);}
  to{ transform: translateY(-0.4rem);}
}
@media (max-height:723px){
  .main{ top:10vh;}
  .mainpic{ transform: scale(.85); bottom: 3rem;}
  .btn{ top: calc( 10vh + 12.5rem); }
  .coins{ transform: scale(.8); top: 1.2rem;}
}
.leafLeft{ width: 1.4533rem; position: absolute; left: 0; top: 3.4533rem;
  animation-name: leafLeft1 , leafLeft2;
  animation-duration: .5s ,4s;
  animation-timing-function: linear, ease-in-out;
  animation-delay: 0s , .5s;  
  animation-iteration-count:1,infinite;
}
@keyframes leafLeft1 {
  from{ left: -1.4533rem;}
  to{ left: 0;}
}
@keyframes leafLeft2 {
  0%{transform: rotate(0);transform-origin:left bottom;}
  50%{transform: rotate(-10deg); transform-origin:left bottom;}
  100%{transform: rotate(0);transform-origin:left bottom;}
}

.leafRight{ width: 1.5867rem; position: absolute; right: 0; top: 2.9333rem;
  animation-name: leafRight1 , leafRight2;
  animation-duration: .5s ,4s;
  animation-timing-function: linear, ease-in-out;
  animation-delay: 0s , .5s;  
  animation-iteration-count:1,infinite;
}
@keyframes leafRight1 {
  from{ right: -1.4533rem;}
  to{ right: 0;}
}
@keyframes leafRight2 {
  0%{transform: rotate(0);transform-origin:right bottom;}
  50%{transform: rotate(10deg); transform-origin:right bottom;}
  100%{transform: rotate(0);transform-origin:right bottom;}
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none
  }

  7.5% {
    -webkit-transform: translate3d(-7.5%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-7.5%, 0, 0) rotate3d(0, 0, 1, -3deg)
  }

  15% {
    -webkit-transform: translate3d(5%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(5%, 0, 0) rotate3d(0, 0, 1, 3deg)
  }

  22.5% {
    -webkit-transform: translate3d(-7.5%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-7.5%, 0, 0) rotate3d(0, 0, 1, -3deg)
  }

  30% {
    -webkit-transform: translate3d(5%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(5%, 0, 0) rotate3d(0, 0, 1, 3deg)
  }

  45% {
    -webkit-transform: none;
    transform: none
  }
  100% {
    -webkit-transform: none;
    transform: none
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}


@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}