/* 样式 */
.ui-modal-backdrop, .ui-modal, .ui-modal:before, .ui-modal:after, .ui-modal *, .ui-modal *:before, .ui-modal *:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

.ui-modal-backdrop { position:fixed; top:0; bottom:0; left:0; right:0; display:block; width:100%; height:100%; }

.ui-modal { position:fixed; display:block; border-radius:8px; background-color:#fff; box-shadow:0 0 16px rgba(0,0,0,0.25); font-family:"Helvetica Neue",Helvetica,"Microsoft Yahei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif; }

.ui-modal-header { display:block; border-top-left-radius:8px; border-top-right-radius:8px; padding:64px 64px 0px 64px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; line-height:1.5; -webkit-user-select:none; -moz-user-select:none; user-select:none; color:#333; font-size:44px; font-weight:600; }
.ui-modal-body { display:block; padding:0px; }
.ui-modal-footer { display:-webkit-box; display:-moz-box; display:box; border-top:1px solid #e0e0e0; border-bottom-left-radius:8px; border-bottom-right-radius:8px; overflow:hidden; }

.ui-modal-content { position:relative; display:block; white-space:normal; word-break:break-all; word-wrap:break-word; text-align:center; line-height:1.5; color:#666; font-size:44px; font-weight:400; }
.ui-modal-content .ui-modal-icon {  }
.ui-modal-content.ui-modal-content-with-icon { padding-left:68px; text-align:left; }
.ui-modal-content.ui-modal-content-with-icon .ui-modal-icon { position:absolute; top:11px; left:0; }

.ui-modal-input { -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none; display:block; width:100%; height:120px; border:none; border-radius:6px; background-color:#f9f9f9; margin:0; padding:0 28px; color:#666; font-size:44px; font-weight:400; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s; }
.ui-modal-input:focus { border-color:#09bb07; }

.ui-modal-icon { display:block; width:44px; height:44px; background-image:url("images/icon-sprite.png"); background-repeat:no-repeat; background-position:50% 50%; background-size:100% 100%; }
.ui-modal-icon.ui-modal-icon-info { background-image:url("images/icon-info.svg"); }
.ui-modal-icon.ui-modal-icon-success { background-image:url("images/icon-success.svg"); }
.ui-modal-icon.ui-modal-icon-error { background-image:url("images/icon-error.svg"); }
.ui-modal-icon.ui-modal-icon-warning { background-image:url("images/icon-warning.svg"); }
.ui-modal-icon.ui-modal-icon-help { background-image:url("images/icon-help.svg"); }
.ui-modal-icon.ui-modal-icon-loading { background-image:url("images/icon-loading.svg"); }

.ui-modal-svg { display:block; margin:0 auto; width:144px; height:144px; background-repeat:no-repeat; background-position:50% 50%; background-size:144px auto; }
.ui-modal-svg.ui-modal-svg-bars { background-image:url("images/svg-bars.svg"); }
.ui-modal-svg.ui-modal-svg-oval { background-image:url("images/svg-oval.svg"); }
.ui-modal-svg.ui-modal-svg-three-dot { background-image:url("images/svg-three-dot.svg"); }
.ui-modal-svg.ui-modal-svg-three-line { background-image:url("images/svg-three-line.svg"); }

.ui-modal-btn { -webkit-box-flex:1; -moz-box-flex:1; box-flex:1; -webkit-tap-highlight-color:rgba(0,0,0,0); outline:none; cursor:pointer; display:block; width:50%; height:152px; border:none; background-color:transparent; margin:0; padding:0; text-align:center; text-decoration:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; line-height:152px; color:#333; font-size:44px; font-weight:500; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s; }
.ui-modal-btn:active { background-color:#f6f6f6; }
.ui-modal-btn.ui-modal-btn-cancel {  }
.ui-modal-btn.ui-modal-btn-cancel:active {  }
.ui-modal-btn.ui-modal-btn-ok { color:#5e6b8e; }
.ui-modal-btn.ui-modal-btn-ok:active {  }
.ui-modal-btn + .ui-modal-btn { border-left:1px solid #e0e0e0; }

.ui-modal-btn-close { position:absolute; bottom:-96px; left:50%; -webkit-tap-highlight-color:rgba(0,0,0,0); outline:none; cursor:pointer; display:block; width:64px; height:64px; border:none; background:url("images/btn-close.png") no-repeat 0 50%; background-size:auto 64px; margin:0 0 0 -24px; padding:0; }
.ui-modal-btn-close:active { background-position:-64px 50%; }

/* 扩展 */
.ui-modal-alert { min-width:75%; max-width:80%; }
.ui-modal-alert .ui-modal-header {  }
.ui-modal-alert .ui-modal-body { padding:64px; }
.ui-modal-alert .ui-modal-footer {  }
.ui-modal-alert .ui-modal-content {  }

.ui-modal-confirm { min-width:75%; max-width:80%; }
.ui-modal-confirm .ui-modal-header {  }
.ui-modal-confirm .ui-modal-body { padding:64px; }
.ui-modal-confirm .ui-modal-footer {  }
.ui-modal-confirm .ui-modal-content {  }

.ui-modal-prompt { min-width:80%; max-width:80%; }
.ui-modal-prompt .ui-modal-header {  }
.ui-modal-prompt .ui-modal-body { padding:64px; }
.ui-modal-prompt .ui-modal-footer {  }
.ui-modal-prompt .ui-modal-content {  }

.ui-modal-msg { max-width:80%; background-color:rgba(0,0,0,0.8); box-shadow:none; }
.ui-modal-msg .ui-modal-header {  }
.ui-modal-msg .ui-modal-body { padding:48px 64px; }
.ui-modal-msg .ui-modal-footer {  }
.ui-modal-msg .ui-modal-content { color:#fff; }

.ui-modal-loading { border-radius:none; background-color:transparent; box-shadow:none; }
.ui-modal-loading .ui-modal-header {  }
.ui-modal-loading .ui-modal-body { padding:0px; }
.ui-modal-loading .ui-modal-footer {  }
.ui-modal-loading .ui-modal-content {  }

.ui-modal-customized { border-radius:none; background-color:transparent; box-shadow:none; }
.ui-modal-customized .ui-modal-header {  }
.ui-modal-customized .ui-modal-body { padding:0px; }
.ui-modal-customized .ui-modal-footer {  }
.ui-modal-customized .ui-modal-content {  }

/* 动画 */
@-webkit-keyframes modalBounceIn {
  0% { opacity:0; -webkit-transform:scale(0.5); }
  100% { opacity:1; -webkit-transform:scale(1); }
}
@-moz-keyframes modalBounceIn {
  0% { opacity:0; -moz-transform:scale(0.5); }
  100% { opacity:1; -moz-transform:scale(1); }
}
@keyframes modalBounceIn {
  0% { opacity:0; transform:scale(0.5); }
  100% { opacity:1; transform:scale(1); }
}

@-webkit-keyframes modalBounceOut {
  0% { -webkit-transform:scale(1); }
  30% { -webkit-transform:scale(1.05); }
  100% { opacity:0; -webkit-transform:scale(0.6); }
}
@-moz-keyframes modalBounceOut {
  0% { -moz-transform:scale(1); }
  30% { -moz-transform:scale(1.05); }
  100% { opacity:0; -moz-transform:scale(0.6); }
}
@keyframes modalBounceOut {
  0% { transform:scale(1); }
  30% { transform:scale(1.05); }
  100% { opacity:0; transform:scale(0.6); }
}

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

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

@-webkit-keyframes modalFadeInUp {
  0% { opacity:0; -webkit-transform:translateY(100%); }
  100% { opacity:1; -webkit-transform:translateY(0); }
}
@-moz-keyframes modalFadeInUp {
  0% { opacity:0; -moz-transform:translateY(100%); }
  100% { opacity:1; -moz-transform:translateY(0); }
}
@keyframes modalFadeInUp {
  0% { opacity:0; transform:translateY(100%); }
  100% { opacity:1; transform:translateY(0); }
}

@-webkit-keyframes modalFadeOutUp {
  0% { opacity:1; -webkit-transform:translateY(0); }
  100% { opacity:0; -webkit-transform:translateY(-100%); }
}
@-moz-keyframes modalFadeOutUp {
  0% { opacity:1; -moz-transform:translateY(0); }
  100% { opacity:0; -moz-transform:translateY(-100%); }
}
@keyframes modalFadeOutUp {
  0% { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-100%); }
}

@-webkit-keyframes modalFadeInDown {
  0% { opacity:0; -webkit-transform:translateY(-100%); }
  100% { opacity:1; -webkit-transform:translateY(0); }
}
@-moz-keyframes modalFadeInDown {
  0% { opacity:0; -moz-transform:translateY(-100%); }
  100% { opacity:1; -moz-transform:translateY(0); }
}
@keyframes modalFadeInDown {
  0% { opacity:0; transform:translateY(-100%); }
  100% { opacity:1; transform:translateY(0); }
}

@-webkit-keyframes modalFadeOutDown {
  0% { opacity:1; -webkit-transform:translateY(0); }
  100% { opacity:0; -webkit-transform:translateY(100%); }
}
@-moz-keyframes modalFadeOutDown {
  0% { opacity:1; -moz-transform:translateY(0); }
  100% { opacity:0; -moz-transform:translateY(100%); }
}
@keyframes modalFadeOutDown {
  0% { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(100%); }
}

.ui-modal-animation { -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:0.2s; -moz-animation-duration:0.2s; animation-duration:0.2s; }
.ui-modal-animation.ui-modal-animation-bounceIn { -webkit-animation-name:modalBounceIn; -moz-animation-name:modalBounceIn; animation-name:modalBounceIn; }
.ui-modal-animation.ui-modal-animation-bounceOut { -webkit-animation-name:modalBounceOut; -moz-animation-name:modalBounceOut; animation-name:modalBounceOut; -webkit-animation-duration:0.2s; -moz-animation-duration:0.2s; animation-duration:0.2s; }
.ui-modal-animation.ui-modal-animation-fadeIn { -webkit-animation-name:modalFadeIn; -moz-animation-name:modalFadeIn; animation-name:modalFadeIn; }
.ui-modal-animation.ui-modal-animation-fadeOut { -webkit-animation-name:modalFadeOut; -moz-animation-name:modalFadeOut; animation-name:modalFadeOut; -webkit-animation-duration:0.2s; -moz-animation-duration:0.2s; animation-duration:0.2s; }
.ui-modal-animation.ui-modal-animation-fadeInUp { -webkit-animation-name:modalFadeInUp; -moz-animation-name:modalFadeInUp; animation-name:modalFadeInUp; }
.ui-modal-animation.ui-modal-animation-fadeOutUp { -webkit-animation-name:modalFadeOutUp; -moz-animation-name:modalFadeOutUp; animation-name:modalFadeOutUp; -webkit-animation-duration:0.2s; -moz-animation-duration:0.2s; animation-duration:0.2s; }
.ui-modal-animation.ui-modal-animation-fadeInDown { -webkit-animation-name:modalFadeInDown; -moz-animation-name:modalFadeInDown; animation-name:modalFadeInDown; }
.ui-modal-animation.ui-modal-animation-fadeOutDown { -webkit-animation-name:modalFadeOutDown; -moz-animation-name:modalFadeOutDown; animation-name:modalFadeOutDown; -webkit-animation-duration:0.2s; -moz-animation-duration:0.2s; animation-duration:0.2s; }