/* 勇者秘寶 */
.page-warehouse .my-warehouse .btn-receive {
    background: #a9a9a9;
}

.page-warehouse .my-warehouse .btn-receive.giving {
	background: #7a4000;	
}
.more-draw-bg {
    background: url(https://ompic.neteaselab.com/respic/images/mlbb/20210524/20220224.jpg) no-repeat;
    background-color: #fff;
    background-size: contain;
}

.more-draw-bg .main-right-title {
    margin: 10px auto 26px;
    width: 100%;
    height: auto;
}

.more-draw-bg article {
    background: none;
    /* background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/event-bg2.png) no-repeat center top; */
    /* background-size: cover; */
}

.main-right-title .more-draw-title {
    margin: 0 auto;
    width: 502px;
    max-width: 90%;
    height: 98px;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/event-title.png) no-repeat center;
    background-size: contain;
    filter: hue-rotate(332deg);
}

.draw-tips {
    text-align: center;
}

.draw-tips span {
    padding: 2px 20px;
    color: #fff;
    background: rgba(0, 0, 0, .4);
}

.more-draw-bg .lottery {
    margin: 30px auto;
}

.more-draw-bg .lottery .icon {
    margin: 0 auto 30px;
    width: 252px;
    height: 210px;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/treasure-chest.png) no-repeat center;
    background-size: contain;
}

.more-draw-bg .btn-list {
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-draw-bg .btn-list li {
    position: relative;
    margin: 0 16px;
    width: 180px;
    height: auto;
    min-height: 56px;
    padding: 6px 0 10px;
    line-height: 20px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/BUT.png) no-repeat center;
    background-size: contain;
    border-radius: 4px;
    cursor: pointer;
    transition: background .6s ease;
    /* background-image: linear-gradient(0deg, #900b32, #ea4148);
    border: 2px solid #deb450;
    box-shadow: 0px 2px 4px #2a000091; */
    text-shadow: 1px 1px 2px #000000a3;
}

.more-draw-bg .btn-list li:hover {
    /* background: linear-gradient(#8d2f21, #eea765); */
    opacity: .9;
}

.more-draw-bg .btn-list li em {
    font-size: 12px;
    line-height: 1;
}

.more-draw-bg .btn-list li a {
    display: block;
    color: #fff;
    line-height: 40px;
}

.more-draw-bg .btn-list li i {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    color: rgba(255, 255, 255, 0);
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/label.png) no-repeat center;
    background-size: contain;
    font-size: 0;
}

.more-draw-bg .my-point {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

.more-draw-bg .my-point span {
    position: relative;
    padding: 0 6px;
    /* font-weight: 600; */
    color: #ffd800;
}

.more-draw-bg .my-point a {
    margin-left: 16px;
    width: 100px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    line-height: 38px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #ffff;
    background: linear-gradient(#42e9ab, #4493ee);
    /* background: #43bce8; */
    border: 1px solid #69b2bd;
    padding: 0px 10px;
}

.more-draw-bg .my-point a:hover {
    background: linear-gradient(#228796, #61b2fa);
}

.more-draw-bg .award-ins {
    /* position: relative;
    height: 600px;
    overflow-y: auto; */
    border: 3px solid #deb450;
    box-shadow: 0 0 6px #7a4000 inset;
    border-radius: 10px;
    overflow: hidden;
}

/* scrollbar */
tbody::-webkit-scrollbar {
    width: 8px;
}

tbody::-webkit-scrollbar-track {
    background-color: #e2e6eb;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

tbody::-webkit-scrollbar-thumb {
    background-color: #0f1d2b;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.more-draw-bg .award-ins .in-reware-table {
    width: 100%;
}
.more-draw-bg .award-ins .in-reware-table thead {
    background: #917646;
}
table thead tr, table tbody tr {
    box-sizing: border-box;
    table-layout: fixed;
    display: table;
    width: 100%;
}
table thead tr {
    width: calc(100% - 8px);
}
.award-ins .in-reware-table tbody {
    display: block;
    /* width: calc(100% + 6px); */
    width: 100%;
    height: 500px;
    overflow-y: auto;
    background: #fff;
}
.award-ins .in-reware-table th, .in-reware-table td {
    padding: 6px 10px;
    border-right: 1px solid #a38862;
    border-bottom: 1px solid #a38862;
}
.in-reware-table td span{
    position: relative;
    max-width: 100px;
    max-height: 100px;
    margin: auto;    
    display: block;
}
.in-reware-table td span em{
    font-size: 16px;
    color: #01e4fd;
    position: absolute;
    bottom: 7px;
    right: 12px;
}
.award-ins .in-reware-table th:last-child, .in-reware-table td:last-child {
    border-right: none;
}
.award-ins .in-reware-table tr th {
    font-size: 16px;
    padding: 13px 10px;
    background: #917646;
}
.award-ins .in-reware-table tr th span {
    background-color: #7e2424;
    background-image: linear-gradient(0deg, #ffde89, #cea850, #fff);
    -moz-background-clip: text;
    -webkit-background-clip: text;
    -o-background-clip: text;
    -ms-background-clip: text;
    color: transparent;
}
.award-ins .in-reware-table tr th:not(:last-child) {
    width: 15%;
}
.award-ins .in-reware-table tr td:not(:last-child) {
    text-align: center;
    width: 15%;
}
.award-ins .in-reware-table tr th:nth-child(1),.award-ins .in-reware-table tr td:nth-child(1){
    width: 25%;
}

/* .more-draw-bg .award-ins::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 58px;
    background: url(../images/border.png) no-repeat center top;
    background-size: cover;
    z-index: 1;
}

.more-draw-bg .award-ins::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 58px;
    background: url(../images/border.png) no-repeat center bottom;
    background-size: cover;
    z-index: 1;
} */

/* .more-draw-bg .in-reware-table::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 14px;
    height: calc(100% - 116px);
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210414/border-center800.png) repeat right center;
    background-size: inherit;
    z-index: 1;
}

.more-draw-bg .in-reware-table::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 14px;
    height: calc(100% - 116px);
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210414/border-center800.png) repeat left center;
    background-size: inherit;
    z-index: 1;
} */

.more-draw-bg a.more {
    display: block;
    margin: 30px auto 30px;
    width: 140px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    background: #9a5e1d;
    transition: background .6s ease;
}

.more-draw-bg a.more:hover {
    background: #cb7b4c;
}

.box-confirm {
    margin-top: 20px;
    font-size: 18px;
}

.box-confirm .btn-list {
    margin-top: 30px;
}

.box-confirm .btn-list a {
    margin: 0 12px;
    padding: 0;
    display: inline-block;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 36px;
    font-size: 18px;
    color: #9a5e1d;
    border-radius: 4px;
    border: 1px solid #9a5e1d;
    cursor: pointer;
    background: #fff;
    transition: background .6s ease;
}

.box-confirm .btn-list a.btn-confirm {
    color: #fff;
    background: #9a5e1d;
    transition: background .6s ease;
}

.box-confirm .btn-list a.btn-confirm:hover {
    background: #cb7b4c;
}

.box-confirm .btn-list a.btn-cancel:hover {
    background: #fff8f0;
}

.pop-draw.pop-blue .popup-inner {
    position: relative;
    padding-bottom: 0;
    width: 560px;
    max-width: 560px;
    height: 560px;
    background: none;
}

.pop-draw .popup-inner .popup-body {
    padding: 0;
    width: 100%;
    height: 100%;
    background: none;
}

.pop-draw .popup-inner .popup-body::after, .pop-draw.pop-blue .popup-inner::after {
    display: none;
}

.pop-draw ul {
    position: relative;
    width: 100%;
    height: 100%;
}

.pop-draw .popup-inner-pc ul li {
    position: absolute;
    width: 120px;
    height: 92px;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/chest.png) no-repeat center top;
    background-size: 120px auto;
    transition: all 1s ease;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
}

.pop-draw .popup-inner-pc ul li img {
    width: 70px;
    height: auto;
    /* margin-top: -66px; */
}

.pop-draw .popup-inner-pc ul li.first {}

.pop-draw .popup-inner-pc ul li.giving::after {
    content: "";
    position: absolute;
    right: -10px;
    top: -10px;
    width: 50px;
    height: 50px;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/icon.png) no-repeat center;
    background-size: contain;
}

.pop-draw .lottery.award-list li {
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/chest.png) no-repeat center bottom;
    background-size: 120px auto;
}

.pop-draw .draw-btn {
    position: absolute;
    bottom: 140px;
    left: 24px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.pop-draw .draw-btn span {
    margin: 0;
    width: 120px;
    height: 46px;
    line-height: 46px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background: linear-gradient(#019cd4, #247b9a, #4ccfff);
    border-radius: 4px;
    cursor: pointer;
    transition: background .6s ease;
}

.pop-draw .draw-btn span a {
    display: block;
    color: #fff;
}

.pop-draw .draw-btn span:hover {
    background: linear-gradient(#4ccfff, #247b9a, #019cd4);
}

.pop-draw .draw-btn span:not(:last-child) {
    margin-right: 16px;
}

.pop-draw .popup-inner-m {
    display: none;
}

/* .pop-blue .popup-close {
    right: 24%;
    top: 10%;
} */

/* End 勇者秘寶 */

.drawing {
    animation: drawing 0.2s linear;
}

.pop-draw .popup-inner-pc ul li.opening {
    animation: opening 1s linear;
    background-position: center bottom;
}

.pop-draw .popup-inner-pc ul li.opening div {
    animation: uping 1s cubic-bezier(0.42, 0, 0.58, 1);
    /* margin-top: -30px; */
}

.pop-draw .popup-inner-pc ul li.opening::before {
    animation: blink 2s ease infinite;
    content: ' ';
    display: block;
    width: 10px;
    height: 10px;
    box-shadow: 0 0 50px 50px yellow;
    background: yellow;
    margin: 0 auto;
    border-radius: 50px;
    position: relative;
    z-index: -1;
}

.pop-draw .popup-inner-pc ul li span {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -110px 0 0 14px;
    width: 80px;
    height: 140px;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/r-bg.png) no-repeat center;
    background-size: contain;
}
.pop-draw .popup-inner-pc ul li.opening span em{
    font-size: 16px;
    color: #01e4fd;
    position: absolute;
    bottom: 87px;
    right: 36px;
    animation: uping 2s cubic-bezier(0.42, 0, 0.58, 1);
}


.the-rules {
    margin-top: 30px;
}
/* integral */
.mian-integral{
    height: 300px;
    margin: auto;
    width: 800px;
}
.progress{
    width: 100%;
    height: 24px;
    border: 3px solid #deb450;
    position: relative;
    background: #e9dbc19c;
    border-radius: 10px;
    overflow: hidden;
}
.progress-in{
    /* width: 30%; */
    height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 16px;
    background: #563b15;
    z-index: 10;
}
.progress em{
    position: absolute;
    top: 0px;
    left: 5px;
    font-size: 12px;
    z-index: 20;
    color: #fff;
    text-shadow: 1px 1px 2px #21180a;
}
.standard-list{
    width: 100%;
    margin: auto;
    height: 190px;
}
.standard-list ul{
    width: 100%;
    margin: 0 0 0 -90px;
    padding-top: 32px;
    position: relative;
}
.standard-list ul li{
    /* width: 100px; */
    /* height: 100px; */
    float: left;
    position: absolute;
    margin-left: -14px;
}
.standard-list ul li.future{
    -webkit-filter: grayscale(90%);
    -moz-filter: grayscale(90%);
    -ms-filter: grayscale(90%);
    -o-filter: grayscale(90%);
    filter: grayscale(90%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0.9);
}
.standard-list ul b::before {
    content: " ";
    display: block;
    width: 12px;
    height: 12px;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/integral-dot.png) no-repeat;
    background-size: cover;   
}
.standard-list ul b{
    position: absolute;
    left: 0;
    right: 0;
    top: -32px;
    margin: auto;
    text-align: center;
    font-size: 20px;
    color: #ffe710;
    z-index: 10;
    font-weight: 500;
    text-shadow: 0 0px 1px #3c2b11, 0 0px 3px #3C2B11, 0 0px 1px #3c2b11;
    display: flex;
    align-items: center;
    justify-content: center;
}
.standard-list ul a{
    display: block;
    width: 87px;
    height: 27px;
    line-height: 22px;
    text-align: center;
    color: #fff;
    margin: 7px auto 0;
    z-index: 10;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/integral-but.png) no-repeat;
    background-size: contain;
    cursor: pointer;
}
.standard-list ul li .img-box{
    width: 90px;
    height: 103px;
    padding-top: 10px;
    position: relative;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/integral-bg.png) no-repeat center;
    background-size: contain;
}
.standard-list ul li .img-box span{

width: 54px;

height: 54px;

display: block;

margin: auto;

position: relative;
}
.standard-list ul li .img-box em{

position: absolute;

bottom: 4px;

right: 8px;

font-size: 12px;

color: #01e4fd;
}
.standard-list ul li .img-box span img{
    width: 100%;
    height: 100%;
}
.standard-list ul li.past .img-box:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    background: url(//ompic.neteaselab.com/respic/images/mlbb/20210524/integral-already.png) no-repeat center center #00000054;
    position: absolute;
    left: 0;
    top: 0;
}
.standard-list ul img{
    width: 70px;
    height: 70px;
    margin: auto;
    display: block;
}
.standard-list ul .img-box p{
    text-align: center;
    color: #e2e6eb;
    margin: 1px 8px;
    font-size: 11px;
}

/* em integral */
.my-warehouse .goods-items li .item-img{
    position: relative;
}
.my-warehouse .goods-items li .item-img em{
    font-size: 16px;
    color: #01e4fd;
    position: absolute;
    bottom: 7px;
    right: 12px;
}
.server-list{
 display: flex;
 justify-content: center;
 align-items: center;
}
.server-list a{
    padding: 8px 20px;
    border: 1px solid #7a4001;
    margin: 0 10px 20px;
    border-radius: 9px;
    background: #ffebb8;
    cursor: pointer;
}
.server-list a.act{
    background: #7a4001;
    color: #ffebb8;
    border: 1px solid #7a4001;
}

@keyframes drawing {
    0% {
        transform: scale(5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes opening {
    0% {
        background-position: center bottom;
        opacity: 0;
    }
    100% {
        background-position: center bottom;
        opacity: 1;
    }
}

@keyframes uping {
    0% {
        transform: scale(0);
        opacity: 0;
        margin-top: 40px;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        margin-top: -10px;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1
    }
}

@media (max-width: 1440px) {
    .pop-draw .popup-inner .popup-body {
        transform: scale(.9);
    }
}

@media (max-width: 1440px) {
    .pop-draw .popup-inner .popup-body {
        transform: scale(.8);
    }
}

@media (max-width: 800px) {
    .server-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .server-list a {
        padding: 8px 12px;
        border: 1px solid #7a4001;
        margin: 0 8px 10px;
        border-radius: 9px;
        background: #ffebb8;
        cursor: pointer;
    } 
    .mian-integral {
        height: auto;
        padding: 180px 6px 0;
        width: 100%;
        margin-bottom: 30px;
        background: #6a593bd6;
    }
    .standard-list ul {
        margin: auto;
    }
    .standard-list ul li:nth-of-type(even){
        margin-left: -92px;
    }
    .standard-list ul li:nth-of-type(odd){
        top: -148px;
    }
    .standard-list ul li:nth-of-type(odd) b{
        top: 102px;
    }
    .standard-list ul li:nth-of-type(odd) a{
        position: absolute;
        top: -35px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .standard-list ul li{
        margin-left: -46px;
        transform: scale(.9);
    }

    .draw-tips span {
        display: block;
    }
    .pop-draw.pop-blue .popup-inner {
        max-width: 100%;
    }
    .pop-draw .popup-inner .popup-body {
        max-height: 80vh;
        overflow: hidden;
        transform: scale(1);
    }
    .pop-draw .popup-inner .popup-body .big-wheel {
        max-width: 100%;
        max-height: 100%;
        transform: scale(.55);
    }
    .pop-draw .draw-btn {
        left: 0;
        bottom: 0;
    }
    .main-right.event-common-bg.more-draw-bg {
        position: relative;
        background: url(https://ompic.neteaselab.com/respic/images/mlbb/20210524/20220224MB.jpg) no-repeat center top;
        background-size: contain;
        background-color: #fff;
    }
    /* .main-right.event-common-bg.more-draw-bg::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: inherit;
        filter: blur(6px);
        z-index: 2;
    } */
    .more-draw-bg article {
        position: relative;
        z-index: 10;
        padding: 0;
    }
    .more-draw-bg .lottery .icon {
        width: 180px;
        height: 160px;
    }
    .more-draw-bg .btn-list {
        flex-wrap: wrap;
    }
    .more-draw-bg .btn-list li {
        margin: 0;
        width: 46%;
        transition: background .6s ease;
        /* background-image: linear-gradient(0deg, #900b32, #ea4148);
        border: 2px solid #deb450;
        box-shadow: 0px 2px 4px #2a000091; */
        margin: 8px 4px;
    }
    .more-draw-bg .btn-list li:not(:last-child) {
        /* margin-bottom: 16px; */
    }
    .more-draw-bg .my-point {
        flex-direction: column;
    }
    .more-draw-bg .award-ins {
        border-radius: 0;
        border: 2px solid #deb450;
        box-shadow: 0 0 6px #7a4000 inset;
    }
    .more-draw-bg .award-ins::before,
    .more-draw-bg .award-ins::after,
    .more-draw-bg .in-reware-table::before,
    .more-draw-bg .in-reware-table::after {
        display: none;
    }
    .award-ins .in-reware-table tr th {
        background: #917646;
    }
    .progress {
        height: 20px;
        border: 2px solid #deb450;
    }
}
@media (max-width: 375px) {
    .standard-list ul li {
        transform: scale(.7);
    }
    .standard-list ul {
        padding-top: 4px;
    }
    .standard-list ul li:nth-of-type(odd) {
        top: -138px;
    }
    .mian-integral {
        padding: 140px 6px 0;
    }
    .standard-list {
        height: 140px;
    }
}