/* pc 2021-05-14 */
.tc { text-align: center; }
.tr { text-align: right; }

/* loading */
.icon-loading { 
    display: inline-block; vertical-align: middle; margin-top: -2px; 
    font-size: 20px; animation: spin 1.5s cubic-bezier(0.49, 0.68, 0.91, 0.73) infinite;
}
@-webkit-keyframes spin { 
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } 
}
@keyframes spin { 
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } 
}

/* u-btn */
.u-btn { 
    display: inline-block; vertical-align: middle; cursor: pointer;
    padding: 0 15px; height: 32px; line-height: 32px; text-align: center; background-color: #fff; border: 1px solid #d9d9d9; border-radius: 4px;  
    transition: border-color .2s linear, color .2s linear, background-color .2s linear; 
}
.btn-block { display: block; width: 100%; }
.btn-primary { border-color: #11b790; background-color: #11b790; color: #fff; }
.btn-warn    { border-color: #ec3b3b; background-color: #ec3b3b; color: #fff; }
.btn-primary-plain{ border-color: #e0ebff; background-color: #e0ebff; color: #11b790; }
.btn-warn-plain   { border-color: #ffdede; background-color: #ffdede; color: #ec3b3b; }
.btn-primary-line { background-color: transparent; border-color: #11b790; color: #11b790; }
.btn-warn-line    { background-color: transparent; border-color: #ec3b3b; color: #ec3b3b; }
    /**/
.u-btn:hover { border-color: #11b790; color: #11b790; }
.btn-primary-plain:hover { background-color: #11b790; border-color: #11b790; color: #fff; }
.btn-primary:hover { background-color: #31c49d; border-color: #31c49d; color: #fff; }
.btn-warn:hover { background-color: #ef5858; border-color: #ef5858; color: #fff; }
   
/* 弹框结构、同级提示 */
.popup-bar {
    position: fixed; left: 50%; top: 50%; z-index: 1002; transform: translate(-50%, -50%);
    background-color: #fff; border-radius: 4px; 
    overflow: hidden; transition: transform .2s linear;
}
.popup-bar .pop-close { 
    position: absolute; top: 10px; right: 10px; z-index: 10; 
    width: 20px; height: 20px; line-height: 20px; text-align: center; cursor: pointer;
    font-size: 20px; color: #ccc;
}
.popup-bar .pop-close:hover { color: #333; }
.popup-bar .pop-close .iconfont { 
    display: inline-block; vertical-align: middle; margin-top: -2px;
    font-size: 12px; color: #ccc; transition: all .2s linear; transform: rotate(0deg) scale(.9); 
}
.popup-bar .pop-close:hover .iconfont { color: #333; }
    /*显示动画*/
.popup-bar.popup-show { animation: scale .2s linear forwards; }
/* popup-msg */ 
.popup-bar.popup-msg { width: auto;
     /* @extend .popup-msg; */
}
/*弹框出现动画*/
@keyframes scale {
    0% {
        opacity: 0;
        transform: translatex(-50%) translatey(-50%) scale(.8);
    }
    100% {
        opacity: 1;
        transform: translatex(-50%) translatey(-50%) scale(1);
    }
}

/* 有背景 */
.popup-box,
.u-popup-box { 
    position: fixed; left: 0; top: 0; z-index: 1002;
    width: 100%; height: 100%;
}
/* .popup-box.popup-show .popup-bar { animation: scale .2s linear forwards; } */
    /*背景*/
.popup-box .bg,
.u-popup-box .bg { 
    position: absolute; left: 0; top: 0; z-index: 1;
    width: 100%; height: 100%; background-color: rgba(0,0,0, .3);
}
.popup-box .popup-bar { position: absolute; z-index: 2; }
.u-popup-box .popup-bar { transform: none; }
    /*popup-msg*/
.popup-box.popup-msg { background: none; }
.popup-box.popup-msg .popup-bar { 
    padding: 10px 20px; background-color: rgba(0,0,0, .7); border-radius: 4px;
    font-size: 14px; color: #fff; white-space: nowrap;
}

/* popup-msg */
.popup-msg { 
    padding: 10px 20px; background-color: rgba(0,0,0, .7); border-radius: 4px;
    font-size: 14px; color: #fff; line-height: 20px; white-space: nowrap; text-align: center;
}
.popup-msg .iconfont { position: absolute; left: 20px; top: 10px; font-size: 20px; }

/* popup-confirm */
.popup-confirm .popup-bar { width: 400px; }
.popup-confirm .top-img { display: block; width: 100%; border-radius: 4px 4px 0 0; }
.popup-confirm .conts-box { padding: 25px; }
.popup-confirm .conts-box .pop-title { position: relative; font-size: 20px; line-height: 24px; margin-bottom: 14px; }
.popup-confirm .conts-box .iconfont { position: absolute; left: 18px; top: 27px; font-size: 20px; }
.popup-confirm .conts-box .icon-suceed { color: #1ac095; }
.popup-confirm .conts-box .icon-fail { color: #f43651; }
.popup-confirm .conts-box .icon-caution,
.popup-confirm .conts-box .icon-doubt { color: #ee6c41; }
.popup-confirm .conts-box .pop-conts { 
    padding-top: 5px; font-size: 14px; color: #666; position: relative;   
}
.popup-confirm .conts-box .pop-conts .scroll-bar { max-height: 50vh; overflow-y: auto; }
.popup-confirm .conts-box .pop-conts iframe { width: 100%; height: 60vh; border: none; }
.popup-confirm .btn-group { height: 32px; padding: 0 20px 20px; }
.popup-confirm .btn-group .u-btn { 
    min-width: 80px; height: 32px; line-height: 30px; border-radius: 16px; margin: 0 5px;
}
.popup-confirm .btn-group .btn-block { height: 40px; line-height: 40px; border-radius: 4px; }