/* WS 数据加载动画（PC 币币 / 合约） */
.ws_loading{
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    z-index: 6;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    background: linear-gradient(180deg, rgba(25,26,31,.55) 0%, rgba(25,26,31,.92) 35%, rgba(25,26,31,.96) 100%);
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
    pointer-events: none;
    opacity: 1;
    -webkit-transition: opacity .25s ease; transition: opacity .25s ease;
}
.ws_loading.hide{ opacity: 0; visibility: hidden; }
.ws_loading_inner{ width: 78%; max-width: 220px; text-align: center; }
.ws_loading_spinner{
    width: 34px; height: 34px; margin: 0 auto 12px; position: relative;
}
.ws_loading_spinner:before,
.ws_loading_spinner:after{
    content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: wsDepthSpin 1s linear infinite; animation: wsDepthSpin 1s linear infinite;
}
.ws_loading_spinner:before{
    border-top-color: #f6465d; border-right-color: rgba(246,70,93,.25);
}
.ws_loading_spinner:after{
    left: 5px; right: 5px; top: 5px; bottom: 5px;
    border-bottom-color: #0ecb81; border-left-color: rgba(14,203,129,.25);
    -webkit-animation-direction: reverse; animation-direction: reverse;
    -webkit-animation-duration: .85s; animation-duration: .85s;
}
.ws_loading_bars{ margin-top: 2px; }
.ws_loading_bar{
    height: 5px; border-radius: 3px; margin: 7px 0;
    background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.08), rgba(255,255,255,.02));
    background-size: 200% 100%;
    -webkit-animation: wsDepthShimmer 1.35s ease-in-out infinite; animation: wsDepthShimmer 1.35s ease-in-out infinite;
}
.ws_loading_bar.sell{ box-shadow: inset 0 0 0 1px rgba(246,70,93,.12); }
.ws_loading_bar.buy{ box-shadow: inset 0 0 0 1px rgba(14,203,129,.12); }
.ws_loading_bar:nth-child(1){ width: 88%; margin-left: auto; -webkit-animation-delay: 0s; animation-delay: 0s; }
.ws_loading_bar:nth-child(2){ width: 72%; margin-left: auto; -webkit-animation-delay: .08s; animation-delay: .08s; }
.ws_loading_bar:nth-child(3){ width: 60%; margin-left: auto; -webkit-animation-delay: .16s; animation-delay: .16s; }
.ws_loading_bar:nth-child(4){ width: 78%; margin-left: auto; -webkit-animation-delay: .24s; animation-delay: .24s; }
.ws_loading_bar:nth-child(5){ width: 54%; margin-left: auto; -webkit-animation-delay: .32s; animation-delay: .32s; }
.ws_loading_bar:nth-child(6){ width: 68%; -webkit-animation-delay: .4s; animation-delay: .4s; }
.ws_loading_bar:nth-child(7){ width: 82%; -webkit-animation-delay: .48s; animation-delay: .48s; }
.ws_loading_bar:nth-child(8){ width: 58%; -webkit-animation-delay: .56s; animation-delay: .56s; }
.ws_loading_bar:nth-child(9){ width: 74%; -webkit-animation-delay: .64s; animation-delay: .64s; }
.ws_loading_bar:nth-child(10){ width: 90%; -webkit-animation-delay: .72s; animation-delay: .72s; }

/* 容器定位 */
.body_box .exchange_box .exchange_left_box .exchange_market_box .box_content{ position: relative; }
.body_box .exchange_box .exchange_right_box .exchange_deal_box .deal_position{ position: relative; }
.body_box .exchange_box .exchange_right_box .exchange_price_box{ position: relative; }
.body_box .exchange_box .exchange_left_box .exchange_market_box .box_content .ws_loading{ top: 30px; }
.body_box .exchange_box .exchange_right_box .exchange_deal_box .deal_position .ws_loading{ top: 30px; }
.body_box .exchange_box .exchange_right_box .exchange_price_box .ws_loading{ top: 80px; }

@-webkit-keyframes wsDepthSpin{
    to{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes wsDepthSpin{
    to{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes wsDepthShimmer{
    0%{ background-position: 100% 0; opacity: .45; }
    50%{ background-position: 0 0; opacity: 1; }
    100%{ background-position: -100% 0; opacity: .45; }
}
@keyframes wsDepthShimmer{
    0%{ background-position: 100% 0; opacity: .45; }
    50%{ background-position: 0 0; opacity: 1; }
    100%{ background-position: -100% 0; opacity: .45; }
}