/* 样式 */
.ui-modal-backdrop, .ui-modal-mask, .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-mask { position:fixed; top:0; bottom:0; left:0; right:0; cursor:default; display:none; width:100%; height:100%; }

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

.ui-modal-header { position:relative; cursor:default; display:block; height:48px; border-bottom:1px solid #efefef; border-top-left-radius:4px; border-top-right-radius:4px; background-color:#f9f9f9; padding:0 52px 0 20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; line-height:48px; -webkit-user-select:none; -moz-user-select:none; user-select:none; color:#333; font-size:14px; font-weight:600; }
.ui-modal-body { display:block; padding:0px; }
.ui-modal-footer { display:block; border-bottom-left-radius:4px; border-bottom-right-radius:4px; padding:0 20px 20px 20px; text-align:right; }

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

.ui-modal-icon { display:block; width:20px; height:20px; 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:40px; height:40px; background-repeat:no-repeat; background-position:50% 50%; background-size:40px auto; }
.ui-modal-svg.ui-modal-svg-bars { background-image:url("images/svg-bars.svg?v=1.0"); }
.ui-modal-svg.ui-modal-svg-oval { background-image:url("images/svg-oval.svg?v=1.0"); }
.ui-modal-svg.ui-modal-svg-three-dot { background-image:url("images/svg-three-dot.svg?v=1.0"); }
.ui-modal-svg.ui-modal-svg-three-line { background-image:url("images/svg-three-line.svg?v=1.0"); }

.ui-modal-input { outline:none; display:block; width:100%; height:40px; border:1px solid #e0e0e0; border-radius:4px; margin:0; padding:0 10px; text-align:left; line-height:38px; color:#666; font-size:14px; font-weight:400; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s; }
.ui-modal-input:hover { border-color:#66b1ff; }
.ui-modal-input:focus { border-color:#3a8ee6; }

.ui-modal-btn { display:inline-block; height:34px; border:1px solid #e0e0e0; border-radius:4px; background-color:#fff; padding:0 16px; cursor:pointer; vertical-align:middle; text-align:center; text-decoration:none; line-height:32px; -webkit-user-select:none; -moz-user-select:none; user-select:none; color:#333; font-size:14px; font-weight:400; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s; }
.ui-modal-btn:hover { border-color:#66b1ff; background-color:#fff; color:#66b1ff; }
.ui-modal-btn:active { border-color:#3a8ee6; background-color:#fff; color:#3a8ee6; }
.ui-modal-btn-ok { border-color:#409eff; background-color:#409eff; color:#fff; }
.ui-modal-btn-ok:hover { border-color:#66b1ff; background-color:#66b1ff; color:#fff; }
.ui-modal-btn-ok:active { border-color:#3a8ee6; background-color:#3a8ee6; color:#fff; }
.ui-modal-btn + .ui-modal-btn { margin-left:16px; }

.ui-modal-btn-close1 { position:absolute; top:18px; right:20px; width:12px; height:12px; background:url("images/btn-close1.png") no-repeat 0 50%; cursor:pointer; }
.ui-modal-btn-close1::after { content:""; position:absolute; top:-18px; bottom:-18px; left:-20px; right:-20px; }
.ui-modal-btn-close1:hover { background-position:-12px 50%; }
.ui-modal-btn-close1:hover::after {  }

.ui-modal-btn-close2 { position:absolute; top:-10px; right:-10px; width:30px; height:30px; background:url("images/btn-close2.png") no-repeat 0 50%; cursor:pointer; }
.ui-modal-btn-close2:hover { background-position:-30px 50%; }

/* 扩展 */
.ui-modal-alert { min-width:240px; max-width:400px; }
.ui-modal-alert .ui-modal-header {  }
.ui-modal-alert .ui-modal-body { padding:20px; }
.ui-modal-alert .ui-modal-footer {  }
.ui-modal-alert .ui-modal-content {  }

.ui-modal-confirm { min-width:240px; max-width:400px; }
.ui-modal-confirm .ui-modal-header {  }
.ui-modal-confirm .ui-modal-body { padding:20px; }
.ui-modal-confirm .ui-modal-footer {  }
.ui-modal-confirm .ui-modal-content {  }

.ui-modal-prompt { width:320px; }
.ui-modal-prompt .ui-modal-header {  }
.ui-modal-prompt .ui-modal-body { padding:20px; }
.ui-modal-prompt .ui-modal-footer {  }
.ui-modal-prompt .ui-modal-content {  }

.ui-modal-msg { max-width:480px; background-color:rgba(0,0,0,0.8); box-shadow:none; }
.ui-modal-msg .ui-modal-header {  }
.ui-modal-msg .ui-modal-body { padding:16px 20px; }
.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; }