@charset 'utf-8';

*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
.clearfix::after, .clearfix::before { content: ''; display: block; clear: both; width: 0; height: 0; visibility: hidden; }

/**loading style*/
.loading { position: fixed; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 1000; width: 45px; height: 45px }
    .loading:before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border-style: solid; border-width: 5px 5px 0 0; border-color: rgba(249, 59, 119, 1) transparent transparent #00d8c9; -webkit-animation: mint-spinner-rotate 1s infinite linear; animation: mint-spinner-rotate 1s infinite linear }
/*.loading:after { content: ""; position: absolute;*/ /*left: 50%; top: 50%; margin-top: -.06rem; margin-left: -.06rem;*/ /*width: 100%; height: 100%; border-radius: 50%; border-style: solid; border-width: 5px 5px 0 0; border-color: #00d8c9 transparent transparent #00d8c9; -webkit-animation: mint-spinner-rotate 1s infinite linear; animation: mint-spinner-rotate 2s infinite linear }*/
.hide { display: none; }

.loading-circle { margin: 20px auto; width: 100px; height: 100px; border: 5px white solid; border-left-color: #ff5500; border-right-color: #0c80fe; border-radius: 100%; animation: loading1 1s infinite linear; }

@keyframes loading1 {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}


@-webkit-keyframes mint-spinner-rotate {
    0% { -webkit-transform: rotate(0); transform: rotate(0) }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

@keyframes mint-spinner-rotate {
    0% { -webkit-transform: rotate(0); transform: rotate(0) }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

@keyframes scaleDraw {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
}
.live-down { position: fixed; bottom: 10%; z-index: 5; right: 9px; width: 58px; }

/**no data*/
.nodata { text-align: center; height: auto; color: #ccc; font-size: 16px; padding: 32px 0 15px 0; }
    .nodata img { width: 110px; margin-bottom: 23px; }
    .nodata p { padding-top: .3rem; font-size: 22px; }

.user-select { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; }

/** > <span class="arrowUp"></span>*/
.arrowUp:after { content: ''; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); }

.zb_level_bg { position: relative; background: url('/common/images/zb_slices/zb_identify.png') no-repeat; background-size: 100% 100%;}

.level_bg { position: relative; margin: 0 5px; padding-left: 7px; width: 43px; height: 18px; line-height: 18px; background: url(/common/images/icon/level/level_1@2x.png) no-repeat center center; display: inline-block; font-style: normal; color: #fff; font-size: 12px; text-align: center; /*-webkit-transform: scale(.6); transform: scale(.6);*/ vertical-align: middle; font-family: DINAlternate-Bold; background-size: 100% !important; }
    .level_bg::after { content: attr(data-grade); width: 25px; text-align: center; }

.level_bg_1 { background: url('/common/images/icon/level/level_1@2x.png?v=1') no-repeat center center; }
.level_bg_2 { background: url('/common/images/icon/level/level_2@2x.png?v=1') no-repeat center center; }
.level_bg_3 { background: url('/common/images/icon/level/level_3@2x.png?v=1') no-repeat center center; }
.level_bg_4 { background: url('/common/images/icon/level/level_4@2x.png?v=1') no-repeat center center; }
.level_bg_5 { background: url('/common/images/icon/level/level_5@2x.png?v=1') no-repeat center center; }
.level_bg_6 { background: url('/common/images/icon/level/level_6@2x.png?v=1') no-repeat center center; }
.level_bg_vip { background: url('/common/images/icon/level/level_vip@2x.png') no-repeat center center; padding-left: 10px; }

.level { position: relative; width: 25px; height: 25px; line-height: 16px; display: inline-block; vertical-align: middle;  background-size: 100% !important; margin-left: 3px; }
.level_1, .level_0, .level_130 { padding-left: 0 !important; width: 0; }
.level_15 { background: url('/common/images/icon/level/level15@2x.png') no-repeat center }
.level_16 { background: url('/common/images/icon/level/level16@2x.png') no-repeat center }
.level_30 { background: url('/common/images/icon/level/level30@2x.png') no-repeat center }
.level_32 { background: url('/common/images/icon/level/level32@2x.png') no-repeat center }
.level_34 { background: url('/common/images/icon/level/level34@2x.png') no-repeat center }
.level_35 { background: url('/common/images/icon/level/level35@2x.png') no-repeat center }
.level_36 { background: url('/common/images/icon/level/level36@2x.png') no-repeat center }
.level_39 { background: url('/common/images/icon/level/level39@2x.png') no-repeat center; width: 25px; height: 21px; }
.flex { display: box; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; }

.flex-start { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center }

.flex-around { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center }

.flex-between { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center }

.flex-betweens { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-wrap: nowrap; }

.flex-column-start { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center }

.flex-column-between { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.flex-column-between { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

/*��˹ģ��*/
.blur { filter: blur(.7rem); -webkit-filter: blur(.7rem); /* chrome, opera */ -ms-filter: blur(.7rem); -moz-filter: blur(.7rem); }