/* 样式 */
.ui-modal-backdrop,
.ui-modal { position:fixed; }

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

.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 { border-radius:2px; background-color:#fff; font-family:"Helvetica Neue", Helvetica, "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif; }

.ui-modal-head { border-top-left-radius:2px; border-top-right-radius:2px; padding-top:40px; overflow:hidden; -webkit-user-select:none; -moz-user-select:none; user-select:none; text-align:center; line-height:1; white-space:nowrap; text-overflow:ellipsis; color:#333; font-size:32px; font-weight:600; }

.ui-modal-body { padding:40px; }

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

.ui-modal-svg { display:block; margin:0 auto; width:100px; height:100px; background-repeat:no-repeat; background-position:50% 50%; background-size:100px 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-puff { background-image:url("images/svg/puff.svg"); }
.ui-modal-svg.ui-modal-svg-rings { background-image:url("images/svg/rings.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-input { -webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-tap-highlight-color:rgba(0,0,0,0); display:block; width:440px; height:80px; border:1px solid #e0e0e0; border-radius:2px; margin:0; padding:0 20px; outline:none; color:#666; font-size:32px; font-weight:300; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
.ui-modal-input:focus { border-color:#09bb07; }

.ui-modal-content { white-space:normal; word-break:break-all; word-wrap:break-word; line-height:1.5; color:#666; font-size:32px; font-weight:300; }

.ui-modal-foot { display:-webkit-box; display:-moz-box; display:box; border-top:1px solid #efefef; border-bottom-left-radius:2px; border-bottom-right-radius:2px; overflow:hidden; }

.ui-modal-btn { -webkit-box-flex:1; -moz-box-flex:1; box-flex:1; -webkit-tap-highlight-color:rgba(0,0,0,0); display:block; width:50%; height:100px; border:none; background-color:transparent; margin:0; padding:0; outline:none; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; user-select:none; text-align:center; text-decoration:none; line-height:100px; color:#333; font-size:32px; font-weight:300; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
.ui-modal-btn:active { background-color:#f9f9f9; }
.ui-modal-btn.ui-modal-btn-cancel { border-right:1px solid #efefef; color:#333; }
.ui-modal-btn.ui-modal-btn-cancel:active {  }
.ui-modal-btn.ui-modal-btn-ok { color:#09bb07; }
.ui-modal-btn.ui-modal-btn-ok:active {  }

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

/* 扩展 */
.ui-modal-alert { max-width:600px; }

.ui-modal-confirm { max-width:600px; }

.ui-modal-prompt {  }

.ui-modal-msg { max-width:600px; border:none; border-radius:5px; background-color:rgba(0,0,0,0.8); }
.ui-modal-msg .ui-modal-content { text-align:center; color:#fff; }

.ui-modal-loading { border:none; border-radius:0; background-color:transparent; }

/* 动画 */
@-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-animate { -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:0.3s; -moz-animation-duration:0.3s; animation-duration:0.3s; }
.ui-modal-animate.ui-modal-animate-bounceIn { -webkit-animation-name:modalBounceIn; -moz-animation-name:modalBounceIn; animation-name:modalBounceIn; }
.ui-modal-animate.ui-modal-animate-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-animate.ui-modal-animate-fadeIn { -webkit-animation-name:modalFadeIn; -moz-animation-name:modalFadeIn; animation-name:modalFadeIn; }
.ui-modal-animate.ui-modal-animate-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-animate.ui-modal-animate-fadeInUp { -webkit-animation-name:modalFadeInUp; -moz-animation-name:modalFadeInUp; animation-name:modalFadeInUp; }
.ui-modal-animate.ui-modal-animate-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-animate.ui-modal-animate-fadeInDown { -webkit-animation-name:modalFadeInDown; -moz-animation-name:modalFadeInDown; animation-name:modalFadeInDown; }
.ui-modal-animate.ui-modal-animate-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; }