/** New:  弹框  v_1.0.1  by  LJ  2021-04-28 */

/* u-popup-box */
.u-popup-box { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1006; }
.u-popup-box .bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #000; opacity: .5; filter:alpha(opacity=50); }
.u-popup-box.popup-show .popup-bar, .popup-show.popup-bar { -webkit-transform: translateY(0); transform: translateY(0); }

/* popup-bar */
.popup-bar { 
    position: absolute; left: 50%; top: 50%; background-color: #fff; -webkit-box-shadow: 0 15px 32px 0 rgba(0,0,0, .08); box-shadow: 0 15px 32px 0 rgba(0,0,0, .08); border-radius: 4px; 
    -webkit-transition: -webkit-transform .2s linear; 
    transition: -webkit-transform .2s linear; 
    transition: transform .2s linear; 
    transition: transform .2s linear, -webkit-transform .2s linear; -webkit-transform: translateY(-15%); transform: translateY(-15%); 
}
.popup-bar .pop-close, .popup-tips .pop-close { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; text-align: center; cursor: pointer; }
.popup-bar .pop-close .iconfont, .popup-tips .pop-close .iconfont { font-size: 12px; color: #bbb; -webkit-transition: all .2s linear; transition: all .2s linear; -webkit-transform: scale(.8); transform: scale(.8); }
.popup-bar .pop-close:hover .iconfont, .popup-tips .pop-close:hover .iconfont { -webkit-transform: rotate(90deg); transform: rotate(90deg); color: #333; }
.popup-bar .icon-status, .popup-tips .icon-status { font-family: "iconfont" !important; }
.popup-bar .icon-suceed, .popup-tips .icon-suceed { color: #11bb65; }
.popup-bar .icon-fail, .popup-tips .icon-fail { color: #ef5858; }
.popup-bar .icon-caution, .popup-tips .icon-caution,
.popup-bar .icon-doubt, .popup-tips .icon-doubt { color: #ff9900; }
.icon-status.icon-suceed:before { content: "\e643"; }
.icon-status.icon-fail:before { content: "\e64a"; }
.icon-status.icon-caution:before { content: "\e6a4"; }

/* popup-confirm */
.popup-confirm { padding: 26px 25px 20px; display: block; }
.popup-confirm.icon-show { padding-left: 45px; }
.popup-confirm .conts-box { position: relative; }
.popup-confirm .icon-status { position: absolute; top: 4px; left: -27px; font-size: 18px; }
.popup-confirm .pop-title { position: relative; font-size: 18px; margin-bottom: 14px; }
.popup-confirm .pop-conts { font-size: 14px; color: #666; max-height: 450px; }
.popup-confirm .pop-conts .scroll-bar { max-height: 450px; overflow-y: auto; }
.popup-confirm .pop-conts iframe { width: 100%; height: 450px; border: none; }
.popup-confirm .btn-group { margin-top: 25px; }
.popup-confirm .btn-group .u-btn { display: inline-block; vertical-align: middle; min-width: 80px; border-radius: 16px !important; margin-left: 10px; line-height: 30px; background-color: #ff552e; color: #fff; }
.popup-confirm .btn-group .u-btn:first-child { margin-left: 0; }

/* popup-msg */
.popup-msg { padding: 15px; color: #666; }
.popup-msg .icon-status { font-size: 16px; margin: -2px 10px 0 0; }
.popup-msg .conts-box { padding-left: 30px; position: relative; }
.popup-msg .conts-box .icon-status { position: absolute; left: 5px; top: 0; margin: 0; }
.popup-msg .conts-box .pop-title { font-size: 16px; color: #333; }
.popup-msg .conts-box .pop-conts { font-size: 12px; line-height: 20px; color: #999; margin-top: 5px; }

/* popup-tips */
.popup-tips { position: absolute; width: 320px; padding: 15px 20px; background-color: #fff; -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0, .15); box-shadow: 0 1px 6px 0 rgba(0,0,0, .15); border-radius: 4px; }
.popup-tips:after { position: absolute; left: 50%; bottom: -12px; content: ''; border: 6px solid transparent; border-top-color: #fff; margin-left: -6px; }
.popup-tips.tips-top:after { bottom: auto; top: -12px; border-top-color: transparent; border-bottom-color: #fff; }
.popup-tips.icon-show { padding-left: 45px; }
.popup-tips .conts-box { position: relative; }
.popup-tips .icon-status { position: absolute; top: 0; left: -25px; font-size: 16px; }
.popup-tips .pop-title { font-size: 16px; }
.popup-tips .pop-conts { font-size: 14px; color: #666; }
.popup-tips .btn-group { margin-top: 15px; }
.popup-tips .btn-group .u-btn { border-radius: 14px !important; margin-left: 10px; line-height: 30px; }
.popup-tips .btn-group .u-btn:first-child { margin-left: 0; }

/* hover-tip */
.hover-tip { position: absolute; padding: 4px 7px; background-color: #333; border-radius: 4px; font-size: 12px; color: #fff; }
.hover-tip:after { position: absolute; content: ''; border: 4px solid transparent;  }
.hover-tip.tip-top:after { left: 50%; bottom: -8px; margin-left: -4px; border-top-color: #333; }
.hover-tip.tip-bottom:after { left: 50%; top: -8px; margin-left: -4px; border-bottom-color: #333; }
.hover-tip.tip-left:after { top: 50%; right: -8px; margin-top: -4px; border-left-color: #333; }
.hover-tip.tip-right:after { top: 50%; left: -8px; margin-top: -4px; border-right-color: #333; }