* {
    box-sizing: border-box;
}

html, body, div, p, ul, li, dl, dt, dd, em, i, span, a, img, input, h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0
}

a, img, input {
    border: none;
}

button,
input,
select,
textarea {
    font-size: 100%;
    outline: none
}

button {
    border: none;
}

body {
    font: 14px/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
    text-decoration: none;
}

ul, li {
    list-style: none
}

::root {
    --intro-fade: 500ms;
}

body {
    background-color: #000;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

a:hover, button:hover {
    filter: brightness(1.1);
}

/* mainswiper */
.wrap {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.wrap .mainswiper {
    width: 100%;
    height: 100%;
}

.topbar {
    position: fixed;
    z-index: 20;
    width: 100%;
    height: .75rem;
    opacity: 0;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/topbar-bg.png) no-repeat;
    background-size: 100% .75rem;
    animation: slideInDown 0.8s 1s ease forwards;
    display: flex;
    align-items: center;
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translateY(-1rem);
        transform: translateY(-1rem);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.topbar .logo {
    flex-shrink: 0;
    width: .82rem;
    height: .56rem;
    margin: 0 .69rem 0 .83rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/logo.png) no-repeat;
    background-size: 100% 100%;
}

.topbar .nav {
    display: flex;
    align-items: center;
}

.topbar .nav li {
    position: relative;
    width: auto;
    height: .75rem;
    padding: 0 .28rem 0 .26rem;
}

.topbar .nav li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 2px;
    height: .35rem;
    background-color: #255572;
}

.topbar .nav li:last-child::after {
    display: none;
}

.topbar .nav li a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar .nav li a span {
    height: .27rem;
    text-indent: -9999px;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/topbar-nav.png) no-repeat;
    background-size: 9.63rem .54rem;

}

.topbar .nav li:nth-child(1) a span {
    width: .52rem;
    background-position: 0 0;

}

.topbar .nav li:nth-child(2) a span {
    width: 1.55rem;
    background-position: -1.16rem 0;
}

.topbar .nav li:nth-child(3) a span {
    width: 1.3rem;
    background-position: -3.48rem 0;
}

.topbar .nav li:nth-child(4) a span {
    width: 1.82rem;
    background-position: -5.58rem 0;
}

.topbar .nav li:nth-child(5) a span {
    width: 1.56rem;
    background-position: -8.07rem 0;
}

.topbar .nav li a:hover span, .topbar .nav li.on a span {
    background-position-y: bottom;
}

.topbar .right {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    padding-right: .37rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.topbar .share-btn {
    width: 1.2rem;
    height: .3rem;
    padding-left: .44rem;
    font-size: .2rem;
    font-weight: bold;
    color: #000;
    line-height: .3rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/topbar-share-btn.png) no-repeat;
    background-size: 100% 100%;
}

.topbar .login-info {
    margin-right: .2rem;
    font-size: .2rem;
    color: #fff;
}

.topbar .login-info a {
    color: #00eaff;
    text-decoration: underline;
}

.page {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    overflow: hidden;
    color: #fff;
    font-size: 160px;
}

.page .pos {
    position: absolute;
    top: 50%;
    left: 50%;
}

.page.copyright {
    height: 1.5rem;
}

.page-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.page1 {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page1.jpg);
    background-position: 50% 100%;
}

.page1 .fig {
    width: 5.5rem;
    height: 8.37rem;
    margin: -3.97rem 0 0 -2.82rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page1-fig.png) no-repeat;
    background-size: 100% 100%;
}

.page1 .left-txt {
    width: 6.94rem;
    height: 6.68rem;
    margin: -4.74rem 0 0 -9.29rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page1-left-txt.png) no-repeat;
    background-size: 100% 100%;
}

.page1 .right-txt {
    width: 6.88rem;
    height: 6.71rem;
    margin: -4.63rem 0 0 2.2rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page1-right-txt.png) no-repeat;
    background-size: 100% 100%;
}

.page1 .tag {
    width: 5.99rem;
    height: .41rem;
    margin: 2.1rem 0 0 -3.04rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page1-tag.png) no-repeat;
    background-size: 100% 100%;
}

.page1 .btnarea {
    width: 5.38rem;
    height: 1.54rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2.55rem 0 0 -2.79rem;
}

.page1 .btnarea .btn1 {
    width: 1.72rem;
    height: 1.54rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page1-btn1.png) no-repeat;
    background-size: 100% 100%;
}

.page1 .btnarea .qrcode {
    width: 1.48rem;
    height: 1.48rem;
    padding-top: .06rem;
    display: flex;
    flex-direction: column;
    background: #1f1f1f;
    border: solid 1px #c4e154;
}

.page1 .btnarea .qrcode img {
    width: 1.14rem;
    height: 1.14rem;
    margin: 0 auto;
}

.page1 .btnarea .qrcode p {
    font-size: .14rem;
    color: #fff;
    text-align: center;
    line-height: .24rem;
}

.page1 .btnarea .sbtn {
    width: 2.03rem;
    height: .45rem;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.page1 .btnarea .sbtn a {
    width: 100%;
    padding-left: .71rem;
    height: .67rem;
    font-size: .24rem;
    color: #214730;
    line-height: .6rem;
    margin-bottom: 0.08rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.page1 .btnarea .sbtn a:nth-child(1) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page1-sbtn1.png);
}

.page1 .btnarea .sbtn a:nth-child(2) {
    margin-bottom: 0;
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page1-sbtn2.png);
}

.page2 {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page2.jpg);
    background-position: 50% 50%;
}

.page2 .title {
    width: 10.69rem;
    height: 1.87rem;
    margin: -4.28rem 0 0 -5.42rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page2-title.png) no-repeat;
    background-size: 100% 100%;
}

.page2 .iconList {
    width: 8.92rem;
    height: 4.38rem;
    display: flex;
    flex-wrap: wrap;
    gap: .16rem;
    margin: -2.06rem 0 0 -4.46rem;
}

.page2 .iconList li {
    width: 2.11rem;
    height: 2.11rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page2-icon-bg.png) no-repeat;
    background-size: 100% 100%;
}

.page2 .iconList li img {
    width: 1.02rem;
    height: 1.04rem;
    margin: 0 auto;
    border: solid 2px #000;
}

.page2 .iconList li p {
    padding-top: .1rem;
    font-size: .18rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: .24rem;
}

.page2 .iconList li p span {
    font-size: .2rem;
    color: #14ffff;
}

.page2 .rule-tag {
    width: 6.87rem;
    height: .76rem;
    margin: 2.64rem 0 0 -3.42rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page2-rule-tag.png) no-repeat;
    background-size: 100% 100%;
}

.page2 .rule-info {
    width: 6.98rem;
    height: .59rem;
    margin: 3.43rem 0 0 -3.59rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page2-rule-info.png) no-repeat;
    background-size: 100% 100%;
}

.page3 {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3.jpg);
    background-position: 50% 100%;
}

.page3 .title {
    width: 12.09rem;
    height: 1.07rem;
    margin: -4.14rem 0 0 -6.1rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-title.png) no-repeat;
    background-size: 100% 100%;
}

.page3 .control {
    width: 10.79rem;
    height: .85rem;
    margin: -2.76rem 0 0 -5.43rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-control-bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page3 .control .num {
    padding-left: .23rem;
    display: flex;
    align-items: center;
    font-size: .22rem;
    color: #fff;
    font-weight: bold;
}

.page3 .control .num span.icon {
    width: .31rem;
    height: .29rem;
    margin-right: .1rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-control-icon.png) no-repeat;
    background-size: 100% 100%;
}

.page3 .control .num span.yellow {
    font-size: .27rem;
    color: #ffe400;
}

.page3 .control .btnarea {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.page3 .control .btnarea a {
    width: 1.28rem;
    height: .43rem;
    font-size: .2rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: .39rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-control-btn.png) no-repeat;
    background-size: 100% 100%;
}

.page3 .lottery {
    width: 5.33rem;
    height: 4.77rem;
    border: solid 2px #79cbff;
    border-radius: .3rem;
    margin: -1.68rem 0 0 -6.15rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.page3 .lottery .lottery-mod {
    width: 5.14rem;
    padding-top: .08rem;
    display: flex;
    flex-wrap: wrap;
    gap: .08rem;
}

.lottery-item {
    position: relative;
    width: 1.66rem;
    height: 1.32rem;
    background-repeat: no-repeat;
    background-size: 1.66rem 2.64rem;
    transition: transform .3s ease-in-out;
    transform-origin: center center;
}

.lottery-item:nth-child(1) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-item1.png);
}

.lottery-item:nth-child(2) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-item2.png);
}

.lottery-item:nth-child(3) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-item3.png);
}

.lottery-item:nth-child(4) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-item4.png);
}

.lottery-item:nth-child(5) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-item5.png);
}

.lottery-item:nth-child(6) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-item6.png);
}

.lottery-item:nth-child(7) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-item7.png);
}

.lottery-item:nth-child(8) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-item8.png);
}

.lottery-item:nth-child(9) {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-item9.png);
}

.lottery-item.active {
    z-index: 20;
    transform: scale(1.05);
    background-position-y: bottom;
}

.page3 .lottery .lottery-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page3 .lottery .lottery-btn {
    position: absolute;
    bottom: -.57rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3.41rem;
    height: 1.1rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-lottery-btn.png) no-repeat;
    background-size: 100% 100%;
}

.page3 .lottery .lottery-count {
    position: absolute;
    bottom: -.81rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: .18rem;
    color: #000;
    text-align: center;
    line-height: .24rem;
}

.page3 .task {
    width: 6.37rem;
    margin: -1.62rem 0 0 -.32rem;
    display: flex;
    flex-direction: column;
    gap: .12rem;
}

.page3 .task .item {
    width: 100%;
    height: .62rem;
    padding: 0 .25rem 0 .4rem;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    border-radius: .15rem;
    border: solid 1px #79b9e2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page3 .task .item .name {
    display: flex;
    align-items: center;
    gap: .18rem;
    font-size: .22rem;
    color: #296cd0;
}

.page3 .task .item .name img {
    width: .38rem;
    height: .38rem;
}

.page3 .task .item .complete {
    display: flex;
    align-items: center;
    gap: .15rem;
    font-size: .2rem;
    font-weight: bold;
    color: #296cd0;
}

.page3 .task .item .complete a.task-btn {
    width: 1.28rem;
    height: .44rem;
    color: #84431b;
    font-weight: bold;
    text-align: center;
    line-height: .44rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page3-task-btn.png) no-repeat;
    background-size: 100% 100%;
}

.page3 .task .item .complete a.task-btn.disabled {
    filter: grayscale(1);
    cursor: not-allowed;
}

.page3 .task .item .complete p {
    display: flex;
    align-items: center;
    gap: .05rem;
}

.page3 .task .item .complete p span {
    color: #ffac19;
    font-size: .24rem;
}

.page4 {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4.jpg);
    background-position: 50% 100%;
}

.page4 .title {
    width: 13.33rem;
    height: 1.1rem;
    margin: -4.19rem 0 0 -6.6rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-title.png) no-repeat;
    background-size: 100% 100%;
}

.page4 .info {
    width: 12.11rem;
    height: 1.01rem;
    margin: -2.85rem 0 0 -6.13rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-info.png) no-repeat;
    background-size: 100% 100%;
}

.page4 .map-title {
    width: 11.09rem;
    height: .52rem;
    margin: -1.48rem 0 0 -5.8rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-map-title.png) no-repeat;
    background-size: 100% 100%;
}

.page4 .map {
    width: 10rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .16rem;
    margin: -.82rem 0 0 -5rem;
}

.page4 .map .item {
    width: 2.82rem;
    height: 1.07rem;
    margin: 0 .04rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-map-bg.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.page4 .map .item img {
    width: .35rem;
    height: .45rem;
}

.page4 .map .item div:first-child {
    display: flex;
    align-items: center;
    gap: .1rem;
}

.page4 .map .item div:first-child span {
    font-size: .44rem;
    line-height: .44rem;
    color: #fff;
    font-weight: bold;
}

.page4 .map .item div:last-child {
    text-align: center;
    font-size: .18rem;
    line-height: .22rem;
    color: #000;
    font-weight: bold;
}

.page4 .process {
    width: 11.08rem;
    display: flex;
    justify-content: space-between;
    margin: 1.92rem 0 0 -5.61rem;
}

.page4 .process .mod {
    position: relative;
    z-index: 30;
    width: 8.07rem;
    height: 1.75rem;
    padding: .28rem 0 0 1.6rem;
    display: flex;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-process-mod.png) no-repeat;
    background-size: 100% 100%;
}

.page4 .process .mod .icon {
    position: relative;
    width: 1rem;
    height: 1.29rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.page4 .process .mod .icon.icon1 {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-process1.png);
}

.page4 .process .mod .icon.icon2 {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-process2.png);
}

.page4 .process .mod .icon.icon3 {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-process3.png);
}

.page4 .process .mod .icon.icon4 {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-process4.png);
}

.page4 .process .mod .icon .flow-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: .1rem .14rem;
    border-radius: .08rem;
    font-size: .14rem;
    z-index: 100;
    margin-bottom: .08rem;
    border: 1px solid rgba(76, 175, 80, 0.3);
    text-align: center;
    white-space: nowrap;
    line-height: 1.5;
}

.flow-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: .06rem solid transparent;
    border-top-color: rgba(0, 0, 0, 0.95);
}

.page4 .process .mod .icon:hover .flow-tooltip {
    display: block;
}

.page4 .process .mod .arrow {
    flex-shrink: 0;
    margin: .32rem .05rem 0 .05rem;
    width: .44rem;
    height: .34rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-arrow.png) no-repeat;
    background-size: 100% 100%;
}

.page4 .process .btnArea {
    width: 2.7rem;
    display: flex;
    flex-direction: column;
    gap: .01rem;
}

.page4 .process .btnArea a {
    width: 100%;
    height: .58rem;
    text-align: center;
    font-size: .2rem;
    color: #fff;
    line-height: .58rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page4-btn.png) no-repeat;
    background-size: 100% 100%;
}

.page5 {
    background-image: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page5.jpg);
    background-position: 50% 100%;
}

.page5 .title {
    width: 8.71rem;
    height: 1.94rem;
    margin: -4.2rem 0 0 -4.36rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page5-title.png) no-repeat;
    background-size: 100% 100%;
}

.page5 .iconList {
    width: 6.65rem;
    height: 4.38rem;
    display: flex;
    flex-wrap: wrap;
    gap: .16rem;
    margin: -2.06rem 0 0 -3.325rem;
}

.page5 .iconList li {
    width: 2.11rem;
    height: 2.11rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page2-icon-bg.png) no-repeat;
    background-size: 100% 100%;
}

.page5 .iconList li img {
    width: 1.02rem;
    height: 1.04rem;
    margin: 0 auto;
    border: solid 2px #000;
}

.page5 .iconList li p {
    padding-top: .1rem;
    font-size: .18rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: .24rem;
}

.page5 .iconList li p span {
    font-size: .2rem;
    color: #14ffff;
}

.page5 .rule-tag {
    width: 6.87rem;
    height: .76rem;
    margin: 2.64rem 0 0 -3.42rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page5-rule-tag.png) no-repeat;
    background-size: 100% 100%;
}

.page5 .rule-info {
    width: 9.38rem;
    height: .87rem;
    margin: 3.43rem 0 0 -4.69rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/page5-rule-info.png) no-repeat;
    background-size: 100% 100%;
}

.scroll-btn {
    content: "";
    position: fixed;
    z-index: 20;
    bottom: .1rem;
    left: 50%;
    width: 1.26rem;
    height: 1.14rem;
    margin-left: -.63rem;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/scroll-btn.png) no-repeat;
    background-size: 100% 100%;
    animation: scrollAni 2s linear infinite;
    cursor: pointer;
}

.scroll-btn.none {
    display: none;
}

@keyframes scrollAni {
    0% {
        transform: translateY(-10px) rotateY(0)
    }

    50% {
        transform: translateY(0) rotateY(-90deg)
    }

    to {
        transform: translateY(-10px) rotateY(-180deg)
    }
}

/* 弹框 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: rgba(18, 56, 131, 0.95);
    width: 4.75rem;
    padding: .2rem;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    border: 0.04rem solid #cab383;
    position: relative;
    border-radius: .25rem;
}

.modal-close-btn {
    position: absolute;
    top: -.29rem;
    right: -.43rem;
    width: .43rem;
    height: .43rem;
    border: none;
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/modal-close-btn.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    z-index: 10;
    text-indent: -999em;
}

.modal-close-btn:hover {
    transition: all .3s ease;
    transform: rotate(180deg);
}

/* 登录弹窗 */
#login-modal .modal-content {
    padding: .1rem;
    width: max-content;
    border-color: #fff;
    background-color: #fff;
}

.login-close-btn {
    position: absolute;
    top: -.2rem;
    right: -.2rem;
    width: .32rem;
    height: .32rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
    font-size: .18rem;
    line-height: 1;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-content h2 {
    height: .92rem;
    font-size: .4rem;
    color: #fff1c2;
    text-align: center;
    line-height: .92rem;
}

.modal-content h3 {
    height: .46rem;
    margin-bottom: .18rem;
    font-size: .3rem;
    color: #fff1c2;
    text-align: center;
    line-height: .46rem;
}

.modal-content .option {
    width: 2.67rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.modal-content .option button {
    width: 100%;
    height: .53rem;
    font-size: .25rem;
    font-weight: bold;
    color: #84431b;
    text-align: center;
    line-height: .49rem;
    cursor: pointer;
}

.modal-content .option button.btn1 {
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/option-btn1.png) no-repeat;
    background-size: 100% 100%;
}

.modal-content .option button.btn2 {
    background: url(https://static.web.sdo.com/mxdc/pic/project/mxdc_celebration/option-btn2.png) no-repeat;
    background-size: 100% 100%;
}

/* 1.抽奖结果弹框 */
#result-modal .mod {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-bottom: .25rem;
    padding: .25rem;
    border-radius: .06rem;
    background-color: #294a89;
    border: solid 1px #51c4c7;
}

#result-modal .mod .img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.19rem;
    height: 1.16rem;
    margin: 0 auto;
    background-color: #fff;
    border-radius: .06rem;
}

#result-modal .mod .img img {
    width: calc(100% - .1rem);
    height: auto;
}

#result-modal .mod .text1, #result-modal .mod .text2 {
    line-height: .24rem;
    text-align: center;
}

#result-modal .mod .text1 {
    font-size: .24rem;
    font-weight: bold;
    color: #1efffc;
}

#result-modal .mod .text2 {
    font-size: .22rem;
    font-weight: bold;
    color: #fff000;
}

/* 2.任务完成弹窗 */
#success-modal .text {
    margin-bottom: .2rem;
    font-size: .24rem;
    line-height: .34rem;
    font-weight: bold;
    color: #1efffc;
    text-align: center;
}

/* 3.填写收货信息弹窗 */
#shipping-modal .row {
    padding: 0 .3rem;
    display: flex;
    flex-direction: column;
    color: #fff;
}

#shipping-modal .row label {
    font-size: .18rem;
    line-height: .46rem;
}

#shipping-modal .row input, #shipping-modal .row textarea {
    width: 100%;
    padding: 0 .1rem;
    line-height: .35rem;
    height: .35rem;
    color: #fff;
    border: solid 1px #51c4c7;
    background-color: #294a89;
}

#shipping-modal .row textarea {
    height: .8rem;
    resize: none;
}

#shipping-modal .agree {
    padding: .2rem .3rem;
    display: flex;
    align-items: flex-start;
    font-size: .13rem;
    line-height: .2rem;
    color: #fff;
}

#shipping-modal .agree input {
    cursor: pointer;
    flex-shrink: 0;
    width: .2rem;
    margin-top: 0.03rem;
    margin-right: .1rem;
}

/* 4.京东卡兑换码弹窗 */
#card-modal .mod {
    width: 100%;
    padding: .18rem;
    margin-bottom: .2rem;
    text-align: center;
    border-radius: .06rem;
    border: solid 1px #51c4c7;
    background-color: #294a89;
}

#card-modal .mod p:first-child {
    font-size: .18rem;
    color: #fff;
    line-height: .34rem;
}

#card-modal .mod p:last-child {
    font-size: .2rem;
    color: #1efffc;
    font-weight: bold;
    line-height: .38rem;
}

#card-modal .text {
    padding: 0 .1rem;
    margin-bottom: .2rem;
    font-size: .16rem;
    line-height: .23rem;
    color: #fff;
}

/* 5.实名认证弹窗 */
#realname-modal .row {
    padding: 0 .3rem;
    display: flex;
    flex-direction: column;
    color: #fff;
}

#realname-modal .row label {
    font-size: .18rem;
    line-height: .46rem;

}

#realname-modal .row input {
    width: 100%;
    padding: 0 .1rem;
    height: .35rem;
    line-height: .35rem;
    color: #fff;
    border: solid 1px #51c4c7;
    background-color: #294a89;
}

#realname-modal .agree {
    padding: .2rem .3rem;
    display: flex;
    align-items: flex-start;
    font-size: .13rem;
    line-height: .2rem;
    color: #fff;
}

#realname-modal .agree input {
    cursor: pointer;
    flex-shrink: 0;
    width: .2rem;
    margin-top: 0.03rem;
    margin-right: .1rem;
}

/* 6.实名认证查看弹窗 */
#realname-view-modal .mod {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-bottom: .2rem;
}

#realname-view-modal .mod .item {
    width: 100%;
    padding: .13rem .2rem;
    font-size: .18rem;
    color: #fff;
    line-height: .3rem;
    border-radius: .06rem;
    border: solid 1px #51c4c7;
    background-color: #294a89;
}

/* 7.获奖记录弹窗 */
#prizes-modal .hidden {
    display: none;
}

#modal-my-prizes {
    height: 4.6rem;
    margin-bottom: .2rem;
    overflow-y: auto;
}

#modal-my-prizes::-webkit-scrollbar {
    width: .1rem;
    height: .1rem;
}

#modal-my-prizes::-webkit-scrollbar-track {
    background-color: transparent;
}

#modal-my-prizes::-webkit-scrollbar-thumb {
    background-color: #cab383;
    border-radius: .06rem;
    cursor: pointer;
}

#prizes-modal .items {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.4rem;
    margin-bottom: .2rem;
    padding: 0 .1rem;
    border-radius: .06rem;
    background-color: #294a89;
    border: solid 1px #51c4c7;
}

#prizes-modal .items:last-child {
    margin-bottom: 0;
}

#prizes-modal .items .img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.19rem;
    height: 1.16rem;
    background-color: #fff;
    border-radius: .06rem;
}

#prizes-modal .items .img img {
    width: calc(100% - .1rem);
    height: auto;
}

#prizes-modal .detail {
    width: calc(100% - 1.19rem - .2rem);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

#prizes-modal .detail h4 {
    font-size: .2rem;
    font-weight: bold;
    color: #16ecff;
}

#prizes-modal .detail p {
    display: flex;
    gap: .1rem;
    font-size: .18rem;
    color: #fff;
}

#prizes-modal .detail .tag-1 {
    display: block;
    width: max-content;
    padding: 0 .2rem;
    font-size: .16rem;
    color: #fff;
    line-height: .31rem;
    background-color: #273a6e;
    box-shadow: inset 0 0 .07rem #6a90d7;
    border-radius: .15rem;
}

#prizes-modal .detail .tag-2 {
    display: block;
    width: max-content;
    padding: 0 .2rem;
    font-size: .16rem;
    color: #a7c7ff;
    line-height: .31rem;
    background-color: #273a6e;
    box-shadow: inset 0 0 .07rem #00a2ff;
    border-radius: .15rem;
}

#modal-empty-prizes {
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .2rem;
    color: #fff;
}

/* 8.活动规则弹窗 */
#rules-modal .space {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    color: #fff;
}

#rules-modal .border {
    padding: .05rem .15rem;
    border: solid 1px #51c4c7;
    border-radius: .06rem;
    background-color: #294a89;
}

#rules-modal .border.mod1 {
    line-height: .34rem;
    font-size: .18rem;
}

#rules-modal .border h4 {
    font-size: .2rem;
    font-weight: bold;
    color: #1efffc;
}

#rules-modal .table {
    border-radius: .06rem;
    overflow: hidden;
}

#rules-modal .table td {
    font-size: .14rem;
    line-height: .26rem;
    border-bottom: solid 1px #294a89;
}

#rules-modal .table td:first-child {
    width: 3rem;
    padding-left: .1rem;
    background-color: #15284d;
}

#rules-modal .table td:last-child {
    text-align: center;
    background-color: #0f2c65;
}

#rules-modal ul li {
    font-size: .16rem;
    line-height: .27rem;
}

/* 9.分享活动弹窗 */
.share-link {
    width: 100%;
    padding: .18rem;
    margin-bottom: .26rem;
    text-align: center;
    border-radius: .06rem;
    border: solid 1px #51c4c7;
    background-color: #294a89;
}

.share-link p:first-child {
    font-size: .18rem;
    color: #fff;
    line-height: .34rem;
}

.share-link .url {
    width: 100%;
    background-color: transparent;
    font-size: .2rem;
    color: #1efffc;
    line-height: .26rem;
    word-break: break-all;
}

.share-link input {
    width: 100%;
    height: .38rem;
    text-align: center;
    background-color: transparent;
    font-size: .2rem;
    color: #1efffc;
    line-height: .38rem;
}

/* 10.活动规则弹窗 */
#event-rule-modal .mod {
    width: 100%;
    padding: .18rem;
    margin-bottom: .2rem;
    border-radius: .06rem;
    border: solid 1px #51c4c7;
    background-color: #294a89;
}

#event-rule-modal .smod {
    margin-top: .1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

#event-rule-modal .smod .item {
    width: 100%;
    padding: .13rem .2rem;
    font-size: .18rem;
    color: #fff;
    line-height: .3rem;
    border-radius: .06rem;
    border: solid 1px #51c4c7;
    background-color: #294a89;
}

#event-rule-modal .smod .item p:first-child {
    font-size: .2rem;
    font-weight: bold;
    color: #16ecff;
}

#event-rule-modal .mod h4 {
    font-size: .2rem;
    font-weight: bold;
    color: #16ecff;
}

#event-rule-modal .mod .yellow {
    color: yellow;
}

#rule-modal-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-bottom: .2rem;
    color: #fff;
}

/* 11.花菇地标打卡弹框 */
#map-modal .modal-content {
    width: 7.7rem;
}

#map-modal-content {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: .2rem;
    color: #fff;
}

#map-modal-body {
    height: 4.65rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    overflow-y: auto;
}

#map-modal-body::-webkit-scrollbar {
    width: .1rem;
    height: .1rem;
}

#map-modal-body::-webkit-scrollbar-track {
    background-color: transparent;
}

#map-modal-body::-webkit-scrollbar-thumb {
    background-color: #cab383;
    border-radius: .06rem;
    cursor: pointer;
}

#map-modal .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#map-modal .item .map-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

#map-modal .item .map-item img {
    width: 100%;
    height: auto;
    border-radius: .06rem;
}

#map-modal .item .map-item .maptitle {
    width: 100%;
    font-size: .18rem;
    line-height: .34rem;
    color: #fff;
    text-align: center;
}

/* 12.二维码弹框 */
#qr-modal .modal-content {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qr-modal .modal-content img {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
}

/* alert */
#alert {
    position: fixed;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    z-index: 9999;
    animation: alertIn 0.3s ease forwards;
    pointer-events: none;
}

#alert.remove {
    animation: alertOut 0.3s ease forwards;
}

#alert div {
    padding: 10px 20px;
    border-radius: 4px;
    color: #fff;
}

#alert div.success {
    background: #67c23a;
}

#alert div.error {
    background: #f56c6c;
}

#alert div.warning {
    background: #e6a23c;
}

@keyframes alertIn {
    from {
        opacity: 0;
        top: 0;
    }

    to {
        opacity: 1;
        top: 30px;
    }
}

@keyframes alertOut {
    from {
        opacity: 1;
        top: 30px;
    }

    to {
        opacity: 0;
        top: 0;
    }
}