body {position: relative}
.popup-ready {position: fixed; top: -200%; left: 50%; z-index: 1000; transform: translate3d(-50%, -50%, 0); transform-origin: 50% 50%; box-shadow: 0 0 8px 1px #000; background: #fff; border-radius: 10px;
  animation-timing-function: ease-in;
  animation-duration: 225ms;
}
.popup-ready.open {z-index: 1000; top: 50%}
.popup-ready .popup-close {cursor: pointer; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; text-indent: -999px; font-size: 0; border-radius: 10px; background: red; z-index: 2; border: 1px solid #fff; text-decoration: none}
.popup-ready .popup-close::after {width: 18px; height: 18px; content: '×'; text-indent: 0; font-size: 16px; color: #fff; display: block; text-align: center; line-height: 18px;}
.popup-ready .popup-close:focus {border: 1px dashed #fff}
.alert-content,
.confirm-content {width: 400px; padding: 45px 0 85px; text-align: center; position: relative}
@media screen and (max-width:600px) {
  .popup-ready {width: 90%}
  .alert-content,
  .confirm-content {width: 100%;}
}
.alert-content .txt,
.confirm-content .txt {position: relative; z-index: 1}
.alert-content .type-icon {position: absolute; left: 10px; bottom: 0px; line-height: 1.2em;font-size: 120px; z-index: 0}
.alert-content.success .type-icon::after {content: '✓'; color: #dfd}
.alert-content.wraning .type-icon::after {content: '!'; color: #ee9; font-style: italic}
.alert-content.wrong .type-icon::after {content: '✗'; color: #fdd}
.alert-content.success {color: green}
.alert-content.wraning {color: #9E9E04}
.alert-content.wrong {color: red}
.nice-popup .popup-btns {position: absolute; bottom: 0; left: 0; padding: 5px 0; border-top: 1px solid #bbb; text-align: center; width: 100%; font-size: 0}
.nice-popup .popup-btns .ok,
.nice-popup .popup-btns .cancel {cursor: pointer; display: inline-block; width: 40%; height: 40px; line-height: 40px; margin: 0 5%; border-radius: 10px; font-size: 16px; font-family: '微软雅黑'; border: 1px solid #fff; text-decoration: none; box-sizing: border-box}
.nice-popup .popup-btns .ok:hover,
.nice-popup .popup-btns .cancel:hover {opacity: 0.8}
.nice-popup .popup-btns .ok:active,
.nice-popup .popup-btns .cancel:active {opacity: 0.9}
.nice-popup .popup-btns .ok:focus,
.nice-popup .popup-btns .cancel:focus {border: 1px dashed #bbb}
.nice-popup .popup-btns .ok {color: #fff;
  background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
  background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
  background-image: linear-gradient(top,#4d90fe,#4787ed);
}
.nice-popup .popup-btns .cancel {color: #333;
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
}
.nice-mask {background: rgba(0, 0, 0, 0.5); position: absolute; top: -200%; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 999; transform: translate3d(0, 0, 0);
  animation-timing-function: ease-in;
  animation-duration: 225ms;
}
.nice-mask.show {
  animation-name: show;
  top: 0%; opacity: 1;
}
.nice-mask.show.reverse {
  animation-name: hide;
  top: -200%; opacity: 0;
}
@-webkit-keyframes show {
    0% {top: 0%; opacity: 0;}
    100% {top: 0%; opacity: 1;}
}
@-moz-keyframes show {
    0% {top: 0%; opacity: 0;}
    100% {top: 0%; opacity: 1;}
}
@-webkit-keyframes hide {
    0% {top: 0%; opacity: 1;}
    99% {top: 0%; opacity: 0;}
    100% {top: -200%; opacity: 0;}
}
@-moz-keyframes hide {
    0% {top: 0%; opacity: 1;}
    99% {top: 0%; opacity: 0;}
    100% {top: -200%; opacity: 0;}
}

.nice-popup.popin {
  animation-name: popin;
  transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; top: 50%
}
.nice-popup.popin.reverse {
  animation-name: popout;
  transform: translate3d(-50%, -50%, 0) scale(.8); opacity: 0; top: -200%
}
@-webkit-keyframes popin {
    0% {transform: translate3d(-50%, -50%, 0) scale(.8); opacity: 0; top: 50%}
    20% {transform: translate3d(-50%, -50%, 0) scale(1.1); opacity: 0.2; top: 50%}
    40% {transform: translate3d(-50%, -50%, 0) scale(.9); opacity: 0.4; top: 50%}
    100% {transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; top: 50%}
}
@-moz-keyframes popin {
    0% {transform: translate3d(-50%, -50%, 0) scale(.8); opacity: 0; top: 50%}
    20% {transform: translate3d(-50%, -50%, 0) scale(1.1); opacity: 0.2; top: 50%}
    40% {transform: translate3d(-50%, -50%, 0) scale(.9); opacity: 0.4; top: 50%}
    100% {transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; top: 50%}
}
@-webkit-keyframes popout {
    0% {transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; top: 50%}
    10% {transform: translate3d(-50%, -50%, 0) scale(1.1); opacity: .9; top: 50%}
    99% {transform: translate3d(-50%, -50%, 0) scale(.8); opacity: 0; top: 50%}
    100% {transform: translate3d(-50%, -50%, 0) scale(.8); opacity: 0; top: -200%}
}
@-moz-keyframes popout {
    0% {transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; top: 50%}
    10% {transform: translate3d(-50%, -50%, 0) scale(1.1); opacity: .9; top: 50%}
    99% {transform: translate3d(-50%, -50%, 0) scale(.8); opacity: 0; top: 50%}
    100% {transform: translate3d(-50%, -50%, 0) scale(.8); opacity: 0; top: -200%}
}
.nice-popup.slide {
  animation-name: slidedown;
  opacity: 1; top: 50%
}
.nice-popup.slide.reverse {
  animation-name: slideup;
  opacity: 0; top: -200%
}
@-webkit-keyframes slidedown {
    0% {transform: translate3d(-50%, -80%, 0); opacity: 0;}
    100% {transform: translate3d(-50%, -50%, 0); opacity: 1;}
}
@-moz-keyframes slidedown {
    0% {transform: translate3d(-50%, -80%, 0); opacity: 0;}
    100% {transform: translate3d(-50%, -50%, 0); opacity: 1;}
}
@-webkit-keyframes slideup {
    0% {transform: translate3d(-50%, -50%, 0); opacity: 1; top: 50%}
    99% {transform: translate3d(-50%, -80%, 0); opacity: 0; top: 50%}
    100% {transform: translate3d(-50%, -50%, 0); opacity: 0; top: -200%}
}
@-moz-keyframes slideup {
    0% {transform: translate3d(-50%, -50%, 0); opacity: 1; top: 50%}
    99% {transform: translate3d(-50%, -80%, 0); opacity: 0; top: 50%}
    100% {transform: translate3d(-50%, -50%, 0); opacity: 0; top: -200%}
}
.nice-popup.fadein {
  animation-name: fadein;
  opacity: 1; top: 50%
}
.nice-popup.fadein.reverse {
  animation-name: fadeout;
  opacity: 0; top: -200%
}
@-webkit-keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes fadeout {
    0% {opacity: 1; top: 50%}
    99% {opacity: 0; top: 50%}
    100% {opacity: 0; top: -200%}
}
@-moz-keyframes fadeout {
    0% {opacity: 1; top: 50%}
    99% {opacity: 0; top: 50%}
    100% {opacity: 0; top: -200%}
}
.nice-popup.fall {
  animation-name: fall;
  opacity: 1; top: 50%
}
.nice-popup.fall.reverse {
  animation-name: falldown;
  opacity: 0; top: -200%
}
@-webkit-keyframes fall {
    0% {opacity: 0; top: 0;}
    40% {opacity: 0.8; top: 50%;}
    70% {opacity: 0.9; top: 45%;}
    100% {opacity: 1; top: 50%;}
}
@-moz-keyframes fall {
    0% {opacity: 0; top: 0;}
    40% {opacity: 0.8; top: 50%;}
    70% {opacity: 0.9; top: 45%;}
    100% {opacity: 1; top: 50%;}
}
@-webkit-keyframes falldown {
    0% {opacity: 1; top: 50%;}
    20% {opacity: .9; top: 45%;}
    99% {opacity: 0; top: 100%;}
    100% {opacity: 0; top: -200%;}
}
@-moz-keyframes falldown {
    0% {opacity: 1; top: 50%;}
    20% {opacity: .9; top: 45%;}
    99% {opacity: 0; top: 100%;}
    100% {opacity: 0; top: -200%;}
}