:root {
    --main-bg: rgba(92, 160, 237, .5);
    --main-yellow: #11EDA7;
    --main-bg-2: #0C142A;
    --main-brown: #19222d;
    --main-dark-brown: #4b5592;
    --main-dark-blue: #19222d;
    --main-blue: #5ca0ed;
    --main-purple: #4f2b87;
    --main-yellow-gradual: linear-gradient(0deg, #5ca0ed, #191816);
    --main-money-gradual: linear-gradient(0deg, #5ca0ed, #40220f);
    --main-yellow-gradual-x: linear-gradient(90deg, #5ca0ed, rgba(0, 0, 0, 0));
    --op-2: .2;
    --filter: grayscale(100%);
    --yellow: yellow;
    --yellow-bg: radial-gradient(101.95% 157% at 50% -23%, rgba(238, 177, 58, .6) 0, rgba(198, 114, 15, .474) 31.63%, rgba(81, 55, 17, 0) 100%), #21222b;
    --red: red;
    --red-bg: radial-gradient(101.95% 157% at 50% -23%, rgba(238, 58, 101, .4) 0, rgba(207, 38, 89, .316) 31.63%, rgba(81, 17, 29, 0) 100%), #21222b;
    --purple: purple;
    --purple-bg: radial-gradient(101.95% 157% at 50% -23%, rgba(130, 78, 242, .4) 0, rgba(109, 39, 197, .316) 31.63%, rgba(45, 17, 81, 0) 100%), #21222b;
    --blue: blue;
    --blue-bg: radial-gradient(101.95% 157% at 50% -23%, rgba(78, 81, 242, .4) 0, rgba(39, 56, 197, .32) 31.63%, rgba(81, 17, 17, 0) 100%), #21222b;
    --gray: gray;
    --gray-bg: radial-gradient(101.95% 157% at 50% -23%, rgba(191, 198, 201, .4) 0, rgba(169, 175, 176, .316) 31.63%, rgba(67, 75, 77, 0) 100%), #21222b;
}


body {}

.activeDan {
    position: relative;
}

.el-dialog__body {
    padding: 0 !important;
}

.activeDan::before {
    position: absolute;
    top: 10%;
    right: 10%;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: red;
}

.awardListPop .el-dialog__body {
    border-radius: 5px;
    border: 1px solid var(--main-yellow);
}


@media (min-width: 375px) {
    .w-sm-100 {
        width: 100%;
    }
}

@media (min-width: 960px) {
    .w-md-50 {
        width: 50%;
    }
}

@media (min-width: 1200px) {
    .w-lg-33 {
        width: 33%;
    }
}

@media (min-width: 1600px) {
    .w-lx-20 {
        width: 20%;
    }
}

.off img {
    transition: all .5s;
}

.off img:hover {
    transform: rotate(180deg);
}

.font-12px {
    font-size: 12px !important;
}

.w-10 {
    width: 9.3%;
}

.border-pk0 {
    border: 1px solid rgba(68, 183, 87, 1);
    background-color: rgba(68, 183, 87, .15);
}

.border-pk1 {
    border: 1px solid rgba(74, 104, 254, 1);
    background-color: rgba(74, 104, 254, .15);
}

.border-pk2 {
    border: 1px solid rgba(71, 84, 102, 1);
    background-color: rgba(71, 84, 102, .15);
}

.vue-recycle-scroller__item-view {}

/* 灰度 */
.filter-grayscale-1 {
    filter: grayscale(1)
}

/* 不是灰度 */
.filter-grayscale-0 {
    filter: grayscale(0) !important
}

/* 背景颜色 */
.bg-yellow {
    background-color: var(--main-yellow) !important;
}

.bg_dark_blue {
    background-color: var(--main-dark-blue);
}

.bg-brown {
    width: 90px;
    height: 32px;
    background: url(../image/v5/lucky/search-bg.webp) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #121B24;
}

.bg-dark-brown {
    background-color: var(--main-dark-brown);
}

.bg-blue {
    background-color: var(--main-blue);
}

.bg-blue-op {
    background-color: #24242b;
}

.bg-purple {
    background-color: var(--main-purple);
}

.bg-bg {
    background-color: var(--main-bg);
}

.bg-bg-2 {
    background-color: var(--main-bg-2);
}

.bor-bor-2 {
    border: 1px solid rgb(60, 69, 118);
}

.bg-yellow-gradual-y {
    background-image: var(--main-yellow-gradual);
}

.bg-yellow-gradual-x {
    background-image: var(--main-yellow-gradual-x);
}

/* 背景 样式 */
/* 是否占据全屏 */
.bg-size {
    background-size: 100%;
}

.bg-size-100 {
    background-size: 100% 100%;
}

/* 背景是否重复 */
.bg-repeat {
    background-repeat: no-repeat;
}

.bg-position-bottom {
    background-position: bottom;
}

.bg-position-left {
    background-position: left;
}

.bg-position-right {
    background-position: right;
}

.bg-position-top {
    background-position: top;
}

.bg-position-center {
    background-position: center;
}

.swiper-bg-0 {
    background: var(--gray-bg);
    background: url(https://csgo2024.oss-cn-hongkong.aliyuncs.com/frontend/assets/image/v5/home/5.png) no-repeat center;
    background-size: 100% 100%;
}

.swiper-bg-1 {
    background: var(--yellow-bg);
    background: url(https://csgo2024.oss-cn-hongkong.aliyuncs.com/frontend/assets/image/v5/home/1.png) no-repeat center;
    background-size: 100% 100%;
}

.swiper-bg-2 {
    background: var(--red-bg);
    background: url(https://csgo2024.oss-cn-hongkong.aliyuncs.com/frontend/assets/image/v5/home/2.png) no-repeat center;
    background-size: 100% 100%;
}

.swiper-bg-3 {
    background: var(--purple-bg);
    background: url(https://csgo2024.oss-cn-hongkong.aliyuncs.com/frontend/assets/image/v5/home/3.png) no-repeat center;
    background-size: 100% 100%;
}

.swiper-bg-4 {
    background: var(--blue-bg);
    background: url(https://csgo2024.oss-cn-hongkong.aliyuncs.com/frontend/assets/image/v5/home/4.png) no-repeat center;
    background-size: 100% 100%;
}

.swiper-bg-5 {
    background: var(--gray-bg);
    background: url(https://csgo2024.oss-cn-hongkong.aliyuncs.com/frontend/assets/image/v5/home/5.png) no-repeat center;
    background-size: 100% 100%;
}

/* 边框 四边 */
.border-yellow {
    border: 1px solid var(--main-yellow);
}

.border-dark-blue {
    border: 1px solid var(--main-dark-blue);
}

.border-dark-brown {
    border: 2px solid var(--main-dark-brown);
}

.border-blue {
    border: 1px solid var(--main-blue);
}

.border-purple {
    border: 1px solid var(--main-purple);
}

.border-bg {
    border: 1px solid var(--main-bg);
}

.border-bg-2 {
    border: 1px solid var(--main-bg-2);
}

/* 下边距 */
.border-bottom-yellow {
    border-bottom: 1px solid var(--main-yellow);
}

.border-bottom-dark-brown {
    border-bottom: 1px solid var(--main-dark-brown);
}

.border-bottom-blue {
    border-bottom: 1px solid var(--main-blue);
}

.border-bottom-purple {
    border-bottom: 1px solid var(--main-purple);
}

.border-bottom-bg {
    border-bottom: 1px solid var(--main-bg);
}

.border-bottom-bg-2 {
    border-bottom: 1px solid var(--main-bg-2);
}

/* 上边距 */
.border-top-yellow {
    border-top: 1px solid var(--main-yellow);
}

.border-top-dark-brown {
    border-top: 1px solid var(--main-dark-brown);
}

.border-top-blue {
    border-top: 1px solid var(--main-blue);
}

.border-top-purple {
    border-top: 1px solid var(--main-purple);
}

.border-top-bg {
    border-top: 1px solid var(--main-bg);
}

.border-top-bg-2 {
    border-top: 1px solid var(--main-bg-2);
}

/* 字体颜色  */
.color-yellow {
    color: var(--main-yellow)
}

.color-dark-brown {
    color: var(--main-dark-brown)
}

.color-blue {
    color: var(--main-blue)
}

.color-purple {
    color: var(--main-purple)
}

.color-bg {
    color: var(--main-bg)
}

.color-bg-2 {
    color: var(--main-bg-2)
}

/* 字体超出显示... */
.text-overflow-1 {
    /* 多余内容省略号处理-多行 */
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.text-overflow-2 {
    /* 多余内容省略号处理-多行 */
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.text-overflow-3 {
    /* 多余内容省略号处理-多行 */
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.text-overflow-4 {
    /* 多余内容省略号处理-多行 */
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* 鼠标经过显示手 可更改 */
.cursor-pointer {
    cursor: pointer
}

.cursor-not {
    cursor: not-allowed;
    pointer-events: none
}


/* 溢出 */
.overflow-auto {
    overflow: auto !important
}

.overflow-hidden {
    overflow: hidden !important
}

/* 定位 */
.position-static {
    position: static !important
}

.position-relative {
    position: relative !important
}

.position-absolute {
    position: absolute !important
}

.position-fixed {
    position: fixed !important
}

.position-sticky {
    position: -webkit-sticky !important;
    position: sticky !important
}

/* fixed定位 */
.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100
}

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100
}

/* 方位 归零 */
.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

/* 层级 */
/* 弹窗使用 */
.z-index-101 {
    z-index: 101;
}

.z-index-100 {
    z-index: 100;
}

/* 弹窗使用 */
.z-index-99 {
    z-index: 99;
}

.z-index-98 {
    z-index: 98;
}

.z-index-97 {
    z-index: 97;
}

.z-index-96 {
    z-index: 96;
}

.z-index-0 {
    z-index: -1;
}

.z-index-1 {
    z-index: 0;
}

.z-index-9 {
    z-index: 9;
}

.z-index {
    z-index: -2;
}

/* 高度 */
.h-100 {
    height: 100% !important;
}

.op {
    opacity: 1;
}

.op-9 {
    opacity: .9;
}

.op-8 {
    opacity: .8;
}

.op-7 {
    opacity: .7;
}

.op-6 {
    opacity: .6;
}

.op-5 {
    opacity: .5;
}

.op-4 {
    opacity: .4;
}

.op-3 {
    opacity: .3;
}

.op-2 {
    opacity: .2;
}

.op-1 {
    opacity: .1;
}

.op-0 {
    opacity: 0;
}


.lv1 {
    background-color: var(--yellow) !important;
}

.lv2 {
    background-color: var(--red) !important;
}

.lv3 {
    background-color: var(--purple) !important;
}

.lv4 {
    background-color: var(--blue) !important;
}

.lv5 {
    background-color: var(--gray) !important;
}

.border-0 {
    border-bottom: 3px solid var(--yellow) !important;
}

.border-1 {
    border-bottom: 3px solid var(--yellow);
}

.border-2 {
    border-bottom: 3px solid var(--red);
}

.border-3 {
    border-bottom: 3px solid var(--purple);
}

.border-4 {
    border-bottom: 3px solid var(--blue);
}

.border-5,
.border-undefined {
    border-bottom: 3px solid var(--gray);
}

.border-left--0 {
    border-left: 6px solid var(--yellow) !important;
}

.border-left-1 {
    border-left: 6px solid var(--yellow);
}

.border-left-2 {
    border-left: 6px solid var(--red);
}

.border-left-3 {
    border-left: 6px solid var(--purple);
}

.border-left-4 {
    border-left: 6px solid var(--blue);
}

.border-left-5 {
    border-left: 6px solid var(--gray);
}


.weapon-bg-0 {
    background: var(--gray-bg);
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-bg-1 {
    background: var(--yellow-bg);
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-bg-2 {
    background: var(--red-bg);
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-bg-3 {
    background: var(--purple-bg);
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-bg-4 {
    background: var(--blue-bg);
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-bg-5,
.weapon-bg-undefined {
    background: var(--gray-bg);
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

/* pk 专用 */
.weapon-pk-bg-0 {
    background-image: linear-gradient(0deg, rgba(255, 235, 68, .2), rgba(19, 22, 34, .2)), linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
    ;
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-pk-bg-1 {
    background-image: linear-gradient(0deg, rgba(255, 235, 68, .2), rgba(19, 22, 34, .2)), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
    ;
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-pk-bg-2 {
    background-image: linear-gradient(0deg, rgba(239, 76, 75, .2), rgba(19, 22, 34, .2)), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-pk-bg-3 {
    background-image: linear-gradient(0deg, rgba(114, 62, 211, .2), rgba(19, 22, 34, .2)), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-pk-bg-4 {
    background-image: linear-gradient(0deg, rgba(75, 94, 248, .2), rgba(19, 22, 34, .2)), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.weapon-pk-bg-5 {
    background-image: linear-gradient(0deg, rgba(163, 163, 163, .2), rgba(19, 22, 34, .2)), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
    background-blend-mode: normal, normal;
    border-radius: 4px;
}

.swiper-border-bottom-0 {
    border-bottom: 3px solid var(--gray);
}

.swiper-border-bottom-1 {
    border-bottom: 3px solid var(--yellow);
}

.swiper-border-bottom-2 {
    border-bottom: 3px solid var(--red);
}

.swiper-border-bottom-3 {
    border-bottom: 3px solid var(--purple);
}

.swiper-border-bottom-4 {
    border-bottom: 3px solid var(--blue);
}

.swiper-border-bottom-5 {
    border-bottom: 3px solid var(--gray);
}


.border-skins-1 {
    border-bottom: 3px solid #b0c3d9;
}

.border-skins-2 {
    border-bottom: 3px solid #5e98d9;
}

.border-skins-3 {
    border-bottom: 3px solid #4b69ff;
}

.border-skins-4 {
    border-bottom: 3px solid #8847ff;
}

.border-skins-5 {
    border-bottom: 3px solid #b0c3d9;
}

.border-skins-6 {
    border-bottom: 3px solid #d32ce6;
}

.border-skins-7 {
    border-bottom: 3px solid #eb4b4b;
}

.border-skins-8 {
    border-bottom: 3px solid #b0c3d9;
}

.border-skins-9 {
    border-bottom: 3px solid #4b69ff;
}

.border-skins-10 {
    border-bottom: 3px solid #eb4b4b;
}

.border-skins-11 {
    border-bottom: 3px solid #d32ce6;
}

.border-skins-12 {
    border-bottom: 3px solid #8847ff;
}

.border-skins-14 {
    border-bottom: 3px solid #e4ae39;
}

.border-skins-15 {
    border-bottom: 3px solid #4b69ff;
}

.border-skins-16 {
    border-bottom: 3px solid #8847ff;
}

.border-skins-17 {
    border-bottom: 3px solid #d32ce6;
}

.border-skins-18 {
    border-bottom: 3px solid #eb4b4b;
}



.bg-pk-gun-1 {
    background-color: rgba(251, 202, 1, .1);
}

.bg-pk-gun-2 {
    background-color: rgba(251, 1, 1, .1);
}

.bg-pk-gun-4 {
    background-color: rgba(1, 177, 251, .1);
}

.bg-pk-gun-3 {
    background-color: rgba(242, 1, 251, .1);
}

.bg-pk-gun-5 {
    background-color: rgba(64, 65, 65, .1);
}

.border-linear-1,
.border-linear-6 {
    border: 1px transparent solid;
    border-image: linear-gradient(0deg, rgba(255, 235, 68, .5), rgba(19, 22, 34, .5)), linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
}

.border-linear-2,
.border-linear-7 {
    border: 1px transparent solid;
    border-image: linear-gradient(0deg, rgba(239, 76, 75, .5), rgba(19, 22, 34, .5)), linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
}

.border-linear-4,
.border-linear-8 {
    border: 1px transparent solid;
    border-image: linear-gradient(0deg, rgba(75, 94, 248, .5), rgba(19, 22, 34, .5)), linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
}

.border-linear-3,
.border-linear-9 {
    border: 1px transparent solid;
    border-image: linear-gradient(0deg, rgba(114, 62, 211, .5), rgba(19, 22, 34, .5)), linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
}

.border-linear-5,
.border-linear-10 {
    border: 1px transparent solid;
    border-image: linear-gradient(0deg, rgba(163, 163, 163, .5), rgba(19, 22, 34, .5)), linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
}

.pic-bg-border-1 {
    border: 1px solid var(--yellow);
    background-image: linear-gradient(90deg, var(--yellow), rgba(0, 0, 0, 0));
}

.pic-bg-border-2 {
    border: 1px solid var(--red);
    background-image: linear-gradient(90deg, var(--red), rgba(0, 0, 0, 0));
}

.pic-bg-border-4 {
    border: 1px solid var(--blue);
    background-image: linear-gradient(90deg, var(--blue), rgba(0, 0, 0, 0));
}

.pic-bg-border-3 {
    border: 1px solid var(--purple);
    background-image: linear-gradient(90deg, var(--purple), rgba(0, 0, 0, 0));
}

.pic-bg-border-5 {
    border: 1px solid var(--gray);
    background-image: linear-gradient(90deg, var(--gray), rgba(0, 0, 0, 0));
}



/* 定于i一个顺时针旋转动画 */
@keyframes clockwise_rotation {

    0% {
        -webkit-transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(-180deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    }
}

/* 特殊样式需要公共地方起效果的 */

/* 粒子效果样式 .particle 开头需要 */


/* 滚动条 */
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(225deg, var(--main-yellow), #593bc9);
    border-radius: 3px;

}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background: transparent;
}

/* 清楚默认样式 */
body {
    margin: 0;
    background-color: #1a1a1c
}

a {
    color: #FFFFFF;
}

a:hover {
    text-decoration: none;
    color: #FFFFFF;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input {
    background: none;
    outline: none;
    border: 0;
}

input:focus {
    border: none;
}

button {
    margin: 0;
    padding: 0;
    outline: none;
    border-radius: 0;
    background-color: transparent;
    line-height: inherit;
    width: max-content;
}

button:after {
    border: none;
}

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 {}

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;
}

p {
    line-height: 1.5 !important;
}




.fontSize {
    padding: 30px;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 960px) {
    .fontSize {
        padding: 15px 30px;
        font-size: 14px;
        text-align: center;
    }

    .fontSize img {
        width: 60%;
    }
}

.fontSize>div {
    font-size: 12px;
    text-align: center;
}

.fontSize img {
    width: 90%;
}

.font-size-16px-12px {
    font-size: 16px;
}

@media (max-width: 960px) {
    .font-size-16px-12px {
        font-size: 12px;
    }
}


.vue-particle-effect-button .particles-button {
    padding: 0 !important;
}