.top-bg {
    background:#0E1130;
    background-image: url(../img/banner02.png);
    background-repeat: no-repeat;
}

.p-menu {
    border-radius: 36px;
    width: 492px;
    width: max-content;
    background-color: #ffffff;
    color: #3988FF;
    font-size: 14px;
    display: inline-block;


    position: relative;
    background: #191a3e;
    background: linear-gradient(90deg, #6430F3 0%, #4C6FF0 51%, #FF4EAA 98%);
    border-radius: 24px;
    opacity: 1;
    z-index: 2;
    padding: 1px;
}

.p-menu::before{
    position: absolute;
    top:1px;left:1px;right: 1px;bottom:1px;
    content: ' ';
    border-radius: 24px;
    background: #191a3e;
}


.p-menu li {
    display: inline-block;
    width: 120px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
    position: relative;
}

.p-menu i {
    font-size: 14px !important;
}

.p-menu .select {
    background-color: #4B98F7;
    border-radius: 36px;
    color: #ffffff;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;

    background: linear-gradient(90deg, #6430F3 0%, #4C6FF0 51%, #FF4EAA 98%);
}

.menu-tip-1 {
    width: 80px;
    height: 24px;
    line-height: 24px;
    background: #FF6B1A;
    border-radius: 14px 0px 12px 0px;
    position: absolute;
    top: -20px;
    left: 50%;
    z-index: 99;
}

.menu-tip-2 {
    width: 80px;
    height: 24px;
    line-height: 24px;
    background: #F95D20;
    background: linear-gradient(88deg, #F95D20 0%, #F32D3E 100%);
    border-radius: 14px 0px 12px 0px;
    position: absolute;
    top: -20px;
    left: 50%;
    z-index: 99;
}

.can-use-ip-count{
    border: 1px solid #575b70;
    padding: 13px 10px;
    width: 240px;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    border-radius:22px;
    transition: all 0.3s;
}

.can-use-ip-count:hover{
    border: 1px solid #4C6FF0;
    color: #4C6FF0;
}

.can-use-ip-count-selected{
    border: 1px solid #4C6FF0;
    padding: 13px 10px;
    border-radius:22px;
    text-align: center;
    width: 240px;
    font-size: 12px;
    color: #ffffff;
    background: linear-gradient(90deg, hsl(256, 89%, 57%) 0%, #4C6FF0 25%, #FF4EAA 50%, #6430F3 75%, #4C6FF0 98%);
    background-size:200%;
}


.pre-sell-card {
    width: 224px;
    background: #272a43;
    background-image: linear-gradient(to bottom, #3a3e5d, #272a43);
    border-radius: 8px;
    position: relative;
}

.pre-sell-card::before{
    position: absolute;
    top:0;left:0;right:0;bottom: 0;
    content: '';
    z-index: 1;
    background-image: url(../img/bg_card.png) ;
    background-repeat: no-repeat;
    pointer-events: none;
}

.price-line{
    position: relative;
}

.price-line::before,.price-line::after {
    content: ' ';
    display: inline-block;
    vertical-align: middle;

    width:60px;
    height: 1px;
    margin: 0 10px;
    border-bottom: 1px dashed #655F76;
}

.pay-day-line{
    position: relative;
}

.pay-day-line::before,.pay-day-line::after {
    content: ' ';
    display: inline-block;
    vertical-align: middle;

    width:360px;
    height: 1px;
    margin: 0 10px;
    border-bottom: 1px dashed #655F76;
}


.pay-short-line{
    position: relative;
}

.pay-short-line::before,.pay-short-line::after {
    content: ' ';
    display: inline-block;
    vertical-align: middle;

    width:80px;
    height: 1px;
    margin: 0 10px;
    border-bottom: 1px dashed #655F76;
}

.pay-flow-line{
    position: relative;
}

.pay-flow-line::before,.pay-flow-line::after {
    content: ' ';
    display: inline-block;
    vertical-align: middle;

    width:340px;
    height: 1px;
    margin: 0 10px;
    border-bottom: 1px dashed #655F76;
}


.pay-game-line{
    position: relative;
}

.pay-game-line::before,.pay-game-line::after {
    content: ' ';
    display: inline-block;
    vertical-align: middle;

    width:380px;
    height: 1px;
    margin: 0 10px;
    border-bottom: 1px dashed #655F76;
}


.card-hover-big:hover {
    animation: bigger-12 0.5s;
    animation-fill-mode: forwards;
    z-index: 10;
    position: relative;
}

@keyframes bigger-12 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

.pre-sell-card-big {
    width: 370px;
    height: 220px;
    box-shadow: 0px 0px 10px 1px rgba(132, 169, 215, 0.3100);
    border-radius: 8px;

    
    background: #272a43;
    background-image: linear-gradient(to bottom, #3a3e5d, #272a43);
}

.pre-sell-card-big::before{
    position: absolute;
    top:0;left:0;right:0;bottom: 0;
    content: '';
    z-index: 1;
    background-image: url(../img/bg_card.png) ;
    background-repeat: no-repeat;
    pointer-events: none;
    background-size: 100% 100%;
}

.pre-sell-card-j1 {
    width: 98px;
    height: 26px;
    line-height: 26px;
    background: #0066FF;
    background: linear-gradient(0deg, #0066FF 0%, #8A5CFF 100%);
    border-radius: 0px 5px 0px 26px;
}

.pre-sell-card-j2 {
    width: 98px;
    height: 26px;
    line-height: 26px;
    background: #FF8256;
    background: linear-gradient(0deg, #FE5E06 0%, #FF8256 91%);
    border-radius: 0px 5px 0px 26px;
}


.long-slider .layui-slider-input {
    width: 120px !important;
    background-color: #2e324a;
    border: 1px solid #575b70;
}

.long-slider .layui-slider-input:hover{
    border: 1px solid #7d8297 !important;
}

.long-slider .layui-input{
    background-color: #2e324a;
    color: #ffffff;
}

.long-slider .layui-slider-input-btn{
    border-left:1px solid #575b70;
}

.long-slider .layui-slider-input-btn i:first-child{
    border-bottom:1px solid #575b70;
}

.long-slider .layui-icon:hover{
    color: #4C6FF0 !important;
}

.product-bg{
    background:#272A43;
    background: linear-gradient(180deg, #272A43 0%, #1A1E39 100%);
    border-radius:8px
}

.border-31{
    border: 1px solid #31344c !important;    
}