body{
  background-color:#fff;
}

/*
@font-face {
font-family: "LanTingCuHeiGBK";
src: url('../font/LanTingCuHeiGBK.TTF');
}
*/


.father{
  position: relative;
  width: 537px;
  height: 850px;
  margin: 2% auto 0 auto;
  box-shadow:0 0 4px 0.5px #979797;
  overflow: hidden;
}
.crust{
  position: fixed;
  width: 537px;
  height: 850px;
  z-index: 9999;
  background-color:#fff;

  animation: hiddCrust 1s 3.5s linear forwards;
}
@keyframes hiddCrust{
  from{
    opacity:1;
  }
  90%{
    opacity:0;
  }
  to{
    opacity:0;
    display: none;
    z-index: 0;
  }
}


.begin-effect{
  margin: 50% auto;
  width: 120px;
  height: 50px;

  /*background: url(../images/baseImg.png) -85px -110px;
  background-size: 200%;*/

  background:url(./begin-logo.png) no-repeat center;
  background-size:100% 99%;
    /**/
  animation: changer 3s 0s linear forwards;
}

@keyframes changer {
  from{
    transform: scale(1.5);
    opacity:1;
    filter: blur(0);
  }
  66.6%{
    transform: scale(1.3);
    opacity:1;
    filter: blur(0);
  }
  85%{
    transform: scale(1.3);
    opacity:1;
    filter: blur(0);
  }

  to{
    transform: scale(2);
    opacity:0;
    filter: blur(5px);
  }
}

header{
  position: absolute;
  width:100%;
  height:26%;
  margin: 0;

}
.headerBgImg{
  position: fixed;
  /*z-index: 0;*/
  width: 250px;
  height:23%;

  background: url(./baseImg.png) -600px -846px;
  background-size: 700%;

}

.logoDiv{
  position: relative;
  display: inline-block;
  float: left;

  width: 100px;
  height: 100px;
  background-color:#fff;
  border-radius: 50%;
  text-align: center;

  margin-top:13%;
  margin-right:18%;
  left:10%;
  box-shadow:0 0 7px 2px #DDD;
}
.logoDiv img{
  margin-top:31%;
  width:15px;
  height:45px;
}

.thankWords{
  position: relative;
  display: inline-block;

  height: 90px;
  width: 60%;
  margin-top:13%;
  font-size:30px;
  color:#000;
}

.emojiFace {
  display: inline-block;
  margin-top:-1%;
  width:25px;
  height:auto;
}

.thankWords:first-of-type p{
  float: left;
  margin-top:13%;
  letter-spacing:1px;
}

.thankWords:last-of-type p{
  margin-top: 10px;
  letter-spacing:1px;
}

.typed-cursor{
  opacity: 1;
  font-weight: 100;
  -webkit-animation: blink 0.9s infinite;
  -moz-animation: blink 0.9s infinite;
  -ms-animation: blink 0.9s infinite;
  -o-animation: blink 0.9s infinite;
  animation: blink 0.9s infinite;
}
@-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-ms-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

.typed-fade-out{
  opacity: 0;
  animation: 0;
  transition: opacity .25s;
}

.contant{
  position: absolute;
  width: 100%;
  height: 53%;
  top: 26%;
  overflow: hidden;
  text-align:center;
}
.overimage{
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  width: 427px;
  height: 1%;
  background: #24272B;
  border-radius: 100px;
  z-index: 11;

}
.overimageShadowA{
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  width: 407px;
  height: 0.5%;
  background: #636262;
  border-radius: 100px;
  z-index: 11;
  opacity: 0.6;
}
.overimageShadowB{
  position: relative;
  left: 0;
  right: 0;
  top: -1px;
  margin: auto;
  width: 410px;
  height: 0.6%;
  background: #636262;
  border-radius: 100px;
  z-index: 11;
  opacity: 0.2;
}
.printOuterDiv{
  position: absolute;
  width: 430px;
  height: 3%;

  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  background-color:#24272B;
  border-radius: 4px;
}
.printOuterWay{
  width: 410px;
  height: 40%;

  margin:1% 0 0 2%;
  background-color:#636262;
  border-radius: 4px;;
}

.printPaperDiv{
  position: absolute;
  width: 65%;
  height:90%;
  background:url(./printPaper.png) no-repeat center;
  background-size:100% 99%;

  top:-392px;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 10;

  animation:move 1s 4s linear forwards;
  animation-timing-function: ease-out;
}
@keyframes move {
  0%{transform: translate(0, 0);}
  100%{transform: translate(0, 386px);}
}

.printPaperDiv>span:nth-of-type(1){
  display: inline-block;
  margin-top:27%;
  font-size: 60px;
  color: #D1111D;
}
.printPaperDiv>span:nth-of-type(2){
  font-size: 24px;
  color: #000;
}

.printPaperDiv p {
  display: block;
  font-size: 15PX;
  color: #808080;
  margin: 50px 40px 0 40px;
  line-height:30px;
}

.footer{
  position: absolute;
  width: 100%;
  height: 21%;
  bottom: 0;
  text-align: center;
}

.payChannelDiv{
  position: absolute;
  width: 100%;
  height: 250px;
  z-index: 30;
  text-align:center;
  bottom:-250px;
  background-color:white;
}
.payChannelDivShow{
  position: absolute;
  width: 100%;
  height: 250px;
  z-index: 30;
  text-align:center;
  bottom:-250px;
  background-color:white;


  animation-name:payChannelShowGo;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
@keyframes payChannelShowGo {
  0% { transform:translate(0,0);}
  100% { transform:translate(0,-250px);}

}

.payChannelDivBack{
  position: absolute;
  width: 100%;
  height: 250px;
  z-index: 15;
  text-align:center;
  bottom:0;
  background-color:white;

  animation-name:payChannelShowGoBack;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
@keyframes payChannelShowGoBack {
  0% { transform:translate(0,0);}
  100% { transform:translate(0,250px);}
}

.ul1{
  width: 90%;
  height: 30%;
  display: flex;
  margin: 10% 0 0 5%;
  text-align: center;
}

.ul1>li{
  flex:1;
  height: 100%;
  width: 80%;
  margin: auto;
}
.ul1>li dl{
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;

}
.ul1>li dt{
  display: inline-block;
  width: 60px;
  height: 60px;
  margin:auto 0 6px 0;
}
.ul1>li dd{
  font-size: 14px;
}


#aliBtn dt{
  background:url(./baseImg.png) -17px -13px;
  background-size:2700%;
}
#wxBtn dt{
  background:url(./baseImg.png) -86px -13px;
  background-size:2700%;
}
#unBtn dt{
  background:url(./baseImg.png) -155px -13px;
  background-size:2700%;
}
#qqBtn dt{
  background:url(./baseImg.png) -224px -13px;
  background-size:2700%;
}

.bottom-div{
  width: 100%;
  height:68px;
  background-color:#f4f4f4;
  margin-top: 10%;
}
.bottom-div>span{
  line-height: 68px;
  font-size: 14px;
}

.bg{
  background: rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12;
}

.loadingBg{
  background: rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  z-index: 16;
}
.loadingImg{
  display: block;
  margin-top: 25%;
  color:#fff;
}



.myButton {
  -moz-box-shadow:  0px 4px 10px rgba(0,10,23,.4) ;
  -webkit-box-shadow: 0px 4px 10px rgba(0,10,23,.4) ;
  box-shadow: 0px 6px 20px rgba(0,10,23,.4) ;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #24272B), color-stop(1, #24272B));
  background:-moz-linear-gradient(top, #24272B 5%, #24272B 100%);
  background:-webkit-linear-gradient(top, #24272B 5%, #24272B 100%);
  background:-o-linear-gradient(top, #24272B 5%, #24272B 100%);
  background:-ms-linear-gradient(top, #24272B 5%, #24272B 100%);
  background:linear-gradient(to bottom, #24272B 5%, #24272B 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#24272B', endColorstr='#24272B',GradientType=0);
  background-color:#24272B;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Trebuchet MS;
  font-size:30px;
  padding:17px 85px;
  text-decoration:none;
  border-radius: 4px;

  margin-top: 13px;
  letter-spacing:3px;
}
.myButton>span{
  display: inline-block;
  height: 10px;
  width: 10px;
  background:red;
  border-radius: 5px;
  margin: 5px 20px 5px 0;
}

.channelPoint{
  color:red;
  font-size: 30px;
  margin-top: 3%;
  opacity: .4;
}


.loader-channel{
  display: inline-block;
  width: 60px;
  height: 60px;
  margin:auto 0 6px 0;

  background-color:#fff;

  border-radius: 50%;
  border: 2px solid;
  box-shadow: 0 0 2px #000, inset 0 0 2px #000;

  transform-origin: 50% 50%;
  animation: rotate 1.5s linear infinite;
  animation-timing-function:ease-in-out;
}
.rotatePoint{
  width: 14px;
  height: 14px;
  margin: -7px 0 0 23px;
  border-radius: 7px;
  background-color:red;
  box-shadow: 0 0 2px red, inset 0 0 2px red;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/*#particles-js {
/*position: fixed;
width: 100%;
height: 100%;*/
/*background-color: #fff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}