@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;700;900&display=swap');

html { font-size: calc(100 * 100vw / 1920); }
body { font-family: 'Noto Serif TC', serif;    font-weight: 500; font-size: .16rem; color: #fffad6;;}

button{
    background-color: unset;
    outline: none;
    border: none;
    cursor: pointer;
    color: #f3fbd1;
    font-family: 'Noto Serif TC', serif;
}
.img{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.text{
    letter-spacing: 2px;
    text-shadow: 0 2px 2px rgb(5 5 5 / 80%);
}
.title{
    height: .66rem;
    margin: 0 0 .3rem;
}
.title2{
    height: .8rem;
    line-height: .8rem;
    font-size: .42rem;
    text-align: center;
    margin: 0 0 .3rem;
    background-image: url(../images/min-title.png);
}
.min-title{
    width: 4.16rem;
    height: .6rem;
    line-height: .6rem;
    background-image: url(../images/min-title.png);
    text-align: center;
    display: block;
    margin: 0 auto;
    font-size: .3rem;
    color: #fffde8;
}
/* scrollbar */
.scrollbar::-webkit-scrollbar {
    width: 6px;
}

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

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #f0ce47;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.section{
    width: 100%;
    position: relative;
    /* height: 10.8rem; */
    height: 10.14rem;
    padding-top: .66rem;
    background-size: cover;
}
nav{
    position: fixed;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    padding: 1.3rem .14rem 0 .18rem;
    width: 2.06rem;
    height: 6.64rem;
    text-align: center;
    background-image: url(../images/nav.png);
    box-sizing: border-box;
}
nav ul{
    /* width: 80%; */
    margin: auto;
}
nav ul li{
    padding: .12rem 0;
    line-height: 1;
    font-weight: 700;
    font-family: 'Noto Serif TC', serif;
    border-bottom: 1px dashed #d4c3c2;
    cursor: pointer;
    box-sizing: border-box;
    width: 80%;
    margin: auto;
}
nav ul li:nth-child(5){
    border: none;
}
nav ul li a{
    color: #812f28;
    font-size: .22rem;
}
nav ul li a:hover{
    color: #b33029;
}
nav ul li.appstore,nav ul li.google,nav ul li.fb{
    border: none;
    width: 100%;
    padding: .04rem 0;
}
nav ul li.appstore a,nav ul li.google a,nav ul li.fb a{
    width: 1.4rem;
    height: .42rem;
    margin: 0 auto;
    display: block;
}
nav ul li.appstore a{ background-image: url(../images/APPStore.png);}
nav ul li.google a{ background-image: url(../images/google.png);}
nav ul li.fb a{ background-image: url(../images/facebook.png);}

.navigation{
    position: relative;
    z-index: 200;
}
.menu{display: none;}
.section1{
    background-image: url(../images/section1.jpg);
}
.logo{
    display: block;
    width: 3.73rem;
    height: 1.65rem;
    background-image: url(../images/logo.png);
    position: absolute;
    left: 2.55rem;
    top: .52rem;
}
.login-itm{
    position: absolute;
    right: 1.55rem;
    /* top: .52rem; */
    font-size: .24rem;
    z-index: 10;
    cursor: pointer;
}
.login-itm a{
    display: inline-table;
    width: 1.6rem;
    height: .5rem;
    text-align: center;
    line-height: .5rem;
    background-image: url(../images/login-btn.png);
    margin-left: .2rem;
}
.solgan{
    position: absolute;
    right: 1rem;
    top: 1.52rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .22rem;
}
.solgan .solgan-pic{
    display: block;
    width: 8.65rem;
    height: 5.74rem;
    background-image: url(../images/solgan-pic.png);
}
.solgan .solgan-time{
    width: 5.92rem;
    height: .6rem;
    line-height: .6rem;
    background-image: url(../images/solgan-time.png);
    text-align: center;
    display: none;
}
.solgan .solgan-time span{
    position: relative;
}
.solgan .solgan-time span::after,.solgan .solgan-time span::before{
    position: absolute;
    top: .05rem;
    bottom: 0;
    left: -.32rem;
    margin: auto;
    width: .28rem;
    height: .22rem;
    display: block;
    content: '';
    background: url(../images/time-icon.png) no-repeat center;
    background-size: contain;
}
.solgan .solgan-time span::after{
    left: auto;
    right: -.32rem;
    transform: rotateY(180deg);
}

/* msg S*/
.message {
    position: absolute;
    display: flex;
    align-items: center;
    left: 1rem;
    bottom: 0.48rem;
    padding: .05rem .05rem .05rem .17rem;
    width: 4.52rem;
    height: 0.52rem;
    background-image: url(../images/msg-bg.png);
    box-sizing: border-box;
}
.msg-o { width: .36rem; height: .36rem; cursor: pointer; }
.close-msg {background-image: url(../images/icon-close-msg.svg); }
.open-msg { background-image: url(../images/icon-open-msg.svg); }
.message .msgCont {
    margin-right: .2rem;
    padding-left: .12rem;
    width: calc(100% - 1.76rem);
    color: #9995a4;
    background: none;
    box-sizing: border-box;
}
.msgCont::placeholder {
    color: #c97d7e;
}
.message .btn-submit {
    width: 1.1rem;
    height: 0.44rem;
    line-height: .44rem;
    color: #ae3218;
    font-size: .22rem;
    font-weight: 500;
    letter-spacing: .1rem;
    text-indent: .1rem;
    background-image: url(../images/mes-btn.png);
}
.msg-list {position: absolute;top: 0;left: 0;width: 100%;height: 4.2rem;background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));box-sizing: border-box;z-index: 100;}
.msg-list .msgText { position: absolute; right: 0; display: inline-block; padding: .04rem .16rem; font-size: .14rem; line-height: 1.5; color: #fff; background-color: rgba(255, 255, 255, .4); border-radius: 50px; }
.le00{top: 32%; animation:py 5s ease-in infinite; }
.le01{top: 42%; animation: py2 15s ease-in infinite;}
.le02{top: 52%; animation: py2 9s ease-in infinite;}
.le03{top: 62%; animation: py3 6s ease-in infinite;}
.le04{top: 72%; animation:py 12s ease-in infinite;}
.le05{top: 82%; animation: py2 13s ease-in infinite;}
.le06{top: 92%; animation: py2 17s ease-in infinite;}
.le07{top: 102%; animation: py3 10s ease-in infinite;}
.le08{top: 112%; animation: py2 8s ease-in infinite;}
.le09{top: 122%; animation: py3 7s ease-in infinite;}
.le010{top: 122%;  animation:py 5s ease-in infinite;}
.le011{top: 142%; animation: py 10s ease-in infinite;}
.le012{top: 152%; animation: py2 9s ease-in infinite;}
.le013{top: 162%; animation: py3 6s ease-in infinite;}
.le014{top: 172%; animation: py2 11s ease-in infinite;}
.le015{top: 182%; animation: py 8s ease-in infinite;}
.le016{top: 192%; animation:py 5s ease-in infinite; }
.le017{top: 202%; animation: py2 4s ease-in infinite;}
.le018{top: 212%; animation: py3 12s ease-in infinite;}
.le019{top: 222%; animation: py 8s ease-in infinite;}
.le020{top: 232%; animation: py2 9s ease-in infinite;}
@keyframes py{ 0% { transform: translate(0,0);} 100%{ opacity:.5; transform:translate(-1900px,0px) } }
@keyframes py2{ 0%{transform:translate(0,0);} 100%{opacity:0;transform:translate(-1900px,0px)} }
@keyframes py3{ 0%{opacity:0.2;transform:translate(0,0);} 100%{opacity:.9;transform:translate(-1900px,0px)} }
/* msg E*/


.section2{
    background-image: url(../images/section2.webp);
    display: flex;
    flex-direction: column;
    text-align: center;
}
.t1{
    background-image: url(../images/t1.png);
}
.hint{
    letter-spacing: 2px;
    margin-bottom: .3rem;
    text-align: center;
}
.grade-num{

font-size: .9rem;

font-weight: bold;

display: flex;

text-align: center;

justify-content: center;

align-items: center;

margin-bottom: .2rem;
}
.grade-num span{
    width: .4rem;
    height: 1rem;
    line-height: .4rem;
    background-image: url(../images/grade-num.png);
    writing-mode: vertical-rl;
    text-align: center;
    font-size: .16rem;
    margin-right: .1rem;
}
.grade-list{}
.grade-list ul{
    display: flex;
    text-align: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.grade-list ul li{
    width: 2.3rem;
    height: 3.8rem;
    background-image: url(../images/grade-list-bg.png);
    display: flex;
    text-align: center;
    flex-direction: column;
    color: #b33029;
    align-items: center;
    margin: 0 .12rem;
}
.grade-list ul li h4{
    margin-top: .2rem;
    font-size: .2rem;
}
.grade-list ul li h4 span{
    position: relative;
    font-weight: bold;
}
.grade-list ul li h4 span::before,.grade-list ul li h4 span::after{
    position: absolute;
    top: .05rem;
    bottom: 0;
    left: -.32rem;
    margin: auto;
    width: .22rem;
    height: .14rem;
    display: block;
    content: '';
    background: url(../images/grade-list-icon.png) no-repeat center;
    background-size: contain;
}
.grade-list ul li h4 span::after{
    left: auto;
    right: -.32rem;
    transform: rotateY(180deg);
}
.grade-list ul li em{
    width: 1.01rem;
    height: .44rem;
    display: block;
    margin-top: .18rem;
}
.grade-list ul li:nth-child(1) em{ background-image: url(../images/grade1.png);}
.grade-list ul li:nth-child(2) em{ background-image: url(../images/grade2.png);}
.grade-list ul li:nth-child(3) em{ background-image: url(../images/grade3.png);}
.grade-list ul li:nth-child(4) em{ background-image: url(../images/grade4.png);}
.grade-list ul li:nth-child(5) em{ background-image: url(../images/grade5.png);}
.grade-list ul li .pic{
    width: 1.28rem;
    height: 1.32rem;
    background-image: url(../images/pic.png);
    display: flex;
    text-align: center;
    flex-direction: column;
    margin: .16rem 0 .1rem;
    align-items: center;
    justify-content: center;
}
.grade-list ul li .pic img{
    max-width: .9rem;
}
.grade-list ul li p{
    font-size: .22rem;
    margin-bottom: .12rem;
}
.grade-list ul li button{
    width: 1.4rem;
    height: .44rem;
    background-image: url(../images/grade-list-btn.png);
    font-size: .22rem;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; 
    cursor: auto;
}
.grade-list ul li.act button{
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    cursor: pointer;
}

.progress-bar{
    width: 13.2rem;
    height: .28rem;
    background-image: url(../images/progress-bar.png);
    margin: .2rem auto .3rem;
    background-position: center left;
    /* background-size: contain; */
}
.progress-bar span{
    display: block;
    width: 13rem;
    height: .28rem;
    background-image: url(../images/progress-bar2.png);
    background-position: center left;
    background-size: cover;
    width: 0%;
    /* max-width: 13.2rem; */
}
.progress-bar.act1 span{width: 12.2%;}
.progress-bar.act2 span{width: 31.3%;}
.progress-bar.act3 span{width: 50.3%;}
.progress-bar.act4 span{width: 69.4%;}
.progress-bar.act5 span{width: 99%;}
.progress-bar.act6 span{width: 100%;}
.wish{
    width: 2.5rem;
    height: .8rem;
    background-image: url(../images/wish.png);
    font-size: .36rem;
    margin: 0 auto;
}

.section3{
    background-image: url(../images/section3.webp);
}
.t2{
    background-image: url(../images/t2.png);
}
.announ{
    width: 7.8rem;
    height: .46rem;
    background-image: url(../images/announ.png);
    background-size: 100% 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.announ span{
    width: .22rem;
    height: .2rem;
    background-image: url(../images/icon-announ.svg);
    position: absolute;
    left: .24rem;
}
.announ ul{
    margin-left: .22rem;
}
.announ ul li{
    text-align: center;
    line-height: .3rem;
}
.announ ul li em{
    color: #f0ce47;
}
.section3 .main{
    width: 14rem;
    margin: 0.5rem auto 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}
.crane-draw{
    width: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.crane-draw ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列，每列占用1/4空间 */
    /* grid-template-rows: repeat(4, 1fr); */ /* 4行，每行占用1/4空间 */
    gap: 10px; /* 格子之间的间隙 */
}
.crane-draw ul li{}
.crane-draw ul li .pic{
    width: 1.1rem;
    height: 1.1rem;
    background-image: url(../images/crane-draw-pic.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    text-align: center;
    flex-direction: column;
    /* margin: .16rem 0 .1rem; */
    align-items: center;
    justify-content: center;
}
.crane-draw ul li .pic img{
    max-width: .84rem;
    max-height: .84rem;
    object-fit: contain;
}
.crane-draw ul li p{

font-size: .14rem;

text-align: center;
}
.crane-draw .wish{
    margin-top: .2rem;
}
.crane-task{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.crane-task h3{
    font-size: .32rem;
    margin-right: 1rem;
}
.crane-task h3 em{
    color: #f0ce47;
}
.crane-task ul{}
.crane-task ul li{
    width: 4rem;
    height: .46rem;
    background-image: url(../images/crane-task-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    display: flex;
    align-items: center;
    margin: .2rem 0;
    position: relative;
}
.crane-task ul li.act{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    cursor: auto;
}
.crane-task ul li:nth-child(1),.crane-task ul li:nth-child(5){
    right: .8rem;
}
.crane-task ul li:nth-child(2),.crane-task ul li:nth-child(4){
    right: .4rem;
}
.crane-task ul li p{
    color: #333333;
    margin-left: .2rem;
}
.crane-task ul li p span{
    color: #b33029;
}
.crane-task ul li a{
    display: flex;
    width: 1.3rem;
    height: .46rem;
    line-height: .46rem;
    background-image: url(../images/crane-task-btn.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    text-align: center;
    font-size: .18rem;
    justify-content: center;
    align-items: center;
    letter-spacing: 1px;
    text-shadow: 0 2px 2px rgb(5 5 5 / 80%);
    cursor: pointer;
    color: #fffad6;
}
.crane-task ul li a i{
    width: .28rem;
    height: .3rem;
    background-image: url(../images/crane-task-icon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: .06rem;
}
.crane-rule{
    width: 4.6rem;
}
.crane-rule h4{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #fffad6;
    padding-bottom: .04rem;
    margin-bottom: .04rem;
}
.crane-rule h4 span{
    font-size: .26rem;
    display: flex;
    align-items: center;
}
.crane-rule h4 span i{
    display: block;
    width: .27rem;
    height: .27rem;
    background-image: url(../images/crane-rule-icon.png);
    margin-right: .04rem;
}
.crane-rule h4 a{
    width: 1rem;
    height: .4rem;
    line-height: .4rem;
    background-image: url(../images/more.png);
    font-size: .2rem;
    text-align: center;
    cursor: pointer;
}
.rule-con{letter-spacing: 1px;max-height: 2.2rem;overflow-y: overlay;}
.role{
    width: 5.99rem;
    height: 8.22rem;
    background-image: url(../images/juese.png);
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 1.6rem;
    bottom: 0;
}

.section4{
    background-image: url(../images/section4.webp);
    overflow: hidden;
    position: relative;
}
.t3{
    background-image: url(../images/t3.png);
}
.sle-title{
    width: 2.2rem;
    height: 5.06rem;
    background-image: url(../images/sle-title.png);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.s2-box1 {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 0 2.8rem;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.s2-box1 {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 0px 0.5rem 0 1.9rem;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    align-items: flex-end;
}
/* .s2-box1.act {
    z-index: -1;
} */
.sle-item-1, .sle-item-2 {
    position: relative;
    /* max-height: 10.8rem; */
    opacity: 1;
    transform: translate(0,0);
    transition: all .6s .2s ease;
}
.s2-box1.act .sle-item-1 {
    opacity: 0;
    transform: translate(-300px,0);
    transition: all .6s .2s ease;
}
.s2-box1.act .sle-item-2 {
    opacity: 0;
    transform: translate(300px,0);
    transition: all .6s .2s ease;
}
.sle-item-1 .sle-img {
    position: relative;
    margin-top: 0.36rem;
    width: 4.96rem;
    height: 6.61rem;
}
/* .sle-img::after {
    content: '';
    display: block;
    position: absolute;
    top: -1rem;
    width: 1.3rem;
    height: 2.78rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.sle-item-1 .sle-img::after {
    right: -0.3rem;
    background-image: url(../images/sle-new.png);
}
.sle-item-2 .sle-img::after {
    left: -.3rem;
    background-image: url(../images/sle-old.png);
} */
.sle-item-2 .sle-img {
    position: relative;
    margin: 0.1rem 0 0 0;
    width: 7.31rem;
    height: 6.67rem;
    /* right: -.4rem; */
}
.sle-item-2 .sle-img img {
    /* transform: scaleX(-1); */
}
.sle-btn {
    position: absolute;
    bottom: .9rem;
    z-index: 5;
    width: 2rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    font-size: .26rem;
    font-weight: 700;
    background-image: url(../images/wish.png);
    cursor: pointer;
    /* cursor: url(../images/handF.ico), auto !important; */
}
.sle-item-1 .sle-btn {
    left: 1.5rem;
}
.sle-item-1 .sle-btn::after {
    opacity: 0;
    content: '';
    position: absolute;
    left: -1rem;
    bottom: -1rem;
    width: 1.8rem;
    height: 1.82rem;
    background: url(../images/hand.png) no-repeat center;
    background-size: contain;
    animation: translating 1s ease-in-out 0s infinite;
    transition: opacity .4s ease-in;
}
.sle-item-2 .sle-btn::after {
    opacity: 0;
    content: '';
    position: absolute;
    right: -0.9rem;
    bottom: -1rem;
    width: 1.8rem;
    height: 1.82rem;
    background: url(../images/hand2.png) no-repeat center;
    background-size: contain;
    animation: translating 1s ease-in-out 0s infinite;
}
@keyframes translating {
    50% {
        transform: translate(5px, -5px) scale(1.05);
    }
}
.sle-item-1 .sle-btn.act::after,.sle-item-2 .sle-btn.act::after {
    opacity: 1;
}
.sle-item-2 .sle-btn {
    right: 2.9rem;
}

.sle-img-on {
    position: absolute;
    z-index: 1;
    opacity: 0;
    transform: translate(-100px,0);
    transition: all .6s .2s ease;
    display: none;
}
.sle-img-on.sle-f1{
    top: 2.2rem;
    left: 1.6rem;
    width: 3.14rem;
    height: 8.42rem;
}
.sle-img-on.sle-f2{
    top: 2.2rem;
    left: 1.4rem;
    width: 6.88rem;
    height: 8.42rem;
}
.sle-img-on.act{
    display: block;
}
.sle-img-on img {
    object-fit: contain;
}
.section4 .is-con {
    position: absolute;
    left: 50%;
    bottom: .92rem;
    margin-top: 1.8rem;
    opacity: 0;
    transform: translate(100px,0) translateX(-50%);
    transition: all .6s .2s ease;
}
.sle-img-on.act, .section4 .is-con.act {
    opacity: 1;
    transform: translate(0,0) translateX(-50%);
}
.sle-img-on.act {
    z-index: 3;
}
.section4 .is-con.act {
    z-index: 2;
}
.is-con-top {
    position: relative;
}
.reselect-btn {
    position: absolute;
    right: -0.3rem;
    top: -0.1rem;
    width: 1.01rem;
    height: 2.42rem;
    background-image: url(../images/back-btn.png);
    cursor: pointer;
    transition: transform .6s ease-in;
}
.reselect-btn:hover {
    transform: translateY(-3px);
}
.is-con-top .name {
    display: block;
    position: absolute;
    top: -0.5rem;
    left: -.3rem;
    z-index: 10;
    width: 1.29rem;
    height: 2.78rem;
}
.name.new-name {
    background-image: url(../images/sle-new.png);
}
.name.old-name {
    background-image: url(../images/sle-old.png);
}
.section4 .reward-item {
    display: flex;
    justify-content: space-between;
    padding: .5rem 1rem 0.4rem .8rem;
    width: 11.8rem;
    min-height: 7.28rem;
    height: auto;
    color: #333;
    background: url(../images/sle-bg.webp) no-repeat center;
    background-size: 100% 100%;
    box-sizing: border-box;
}
.reward-item .is-left {
    margin-right: .8rem;
    width: 44%;
    font-size: .18rem;
    display: block;
}
.reward-item .is-left p em {
    color: #a3110e;
}
.r-box {
    /* display: none; */
}
.r-box ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: .4rem 0 .26rem;
}
.r-box ul li {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0.06rem .2rem;
    width: 1.36rem;
    height: 1.36rem;
    text-align: center;
    line-height: 1.5;
    color: #a3110e;
    font-weight: 500;
}
.r-box ul li:nth-child(3n) {
    margin-right: 0;
}
.r-box ul li::before {
    content: "";
    display: block;
    width: 1.36rem;
    height: 1.36rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.nw-r li:nth-child(1)::before {
    background-image: url(../images/nw-r1.png);
}
.nw-r li:nth-child(2)::before {
    background-image: url(../images/ow-r2.png);
}
.nw-r li:nth-child(3)::before {
    background-image: url(../images/ow-r3.png);
}
.nw-r li:nth-child(4)::before {
    background-image: url(../images/nw-r4.png);
}
.nw-r li:nth-child(5)::before {
    background-image: url(../images/nw-r5.png);
}
.on-r li:nth-child(1)::before {
    background-image: url(../images/ow-r1.png);
}
.on-r li:nth-child(2)::before {
    background-image: url(../images/ow-r2.png);
}
.on-r li:nth-child(3)::before {
    background-image: url(../images/ow-r3.png);
}
.on-r li:nth-child(4)::before {
    background-image: url(../images/ow-r4.png);
}
.on-r li:nth-child(5)::before {
    background-image: url(../images/ow-r5.png);
}
.invite-code {
    display: block;
    padding: 0 .2rem;
    margin: auto;
    width: 3.7rem;
    height: .5rem;
    line-height: .56rem;
    color: #713427;
    background: url(../images/crane-task-bg.png) no-repeat center;
    background-size: contain;
    box-sizing: border-box;
}
.invite-code::placeholder {
    color: #9f927d;
}
.receive-nr-btn,.receive-or-btn {
    margin: .34rem auto 0;
    width: 2.54rem;
    height: .64rem;
    line-height: .64rem;
    text-align: center;
    font-size: .26rem;
    font-weight: 900;
    color: #f3fbd1;
    /* text-shadow: 0 0 2px #fff; */
    background-image: url(../images/btn4.png);
}
.reward-item .is-right {
    flex: 1;
    font-size: .18rem;
}
.reward-item .is-right p em {
    color: #a3110e;
}
.invited-num {
    margin: .2rem 0;
    font-size: .22rem;
    text-align: center;
}
.invited-num em {
    padding: 0 .04rem;
    color: #a3110e;
    font-size: .26rem;
}
.invite-reward-item {
    position: relative;
    display: flex;
    margin-bottom: .16rem;
    flex-direction: column;
}
.invite-reward-item h3 {
    position: relative;
    z-index: 2;
    width: 3.12rem;
    height: .43rem;
    background: url(../images/invite-reward-item-t.png) no-repeat center;
    background-size: contain;
    filter: grayscale(1);
    font-size: .26rem;
    color: #f3fbd1;
    margin-bottom: .04rem;
    padding-left: .2rem;
    filter: grayscale(1);
}
.invite-reward-item em {
    font-size: .32rem;
    color: #a3110e;
    line-height: 1;
}
.invite-reward-item ul {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 4.6rem;
    min-height: .8rem;
    box-sizing: border-box;
    filter: grayscale(1);
    background: #f9f4e2;
    border: 2px solid #74140f;
}
.invite-reward-item.act h3, .invite-reward-item.act ul {
    filter: none;
}
.invite-reward-item.act::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 1.31rem;
    height: 1.06rem;
    background: url(../images/achieve-icon.png) no-repeat center;
    background-size: contain;
}

/* .invite-reward-item:not(.act)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 1.31rem;
    height: 1.06rem;
    background: url(../images/un-achieve-icon.png) no-repeat center;
    background-size: contain;
} */
.invite-reward-item.act ul::before, .invite-reward-item.act ul::after {
    display: none;
}
.invite-reward-item ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 25%;
    font-size: .14rem;
    text-align: center;
}
.invite-reward-item ul li:not(:last-child) {
    margin-right: .2rem;
}
.invite-reward-item ul li span {
    width: .46rem;
    height: .46rem;
}
.invite-reward-item ul li p {
    line-height: 1.2;
}
.i-img1 {
    background-image: url(../images/invite-r1.png);
}
.i-img2 {
    background-image: url(../images/invite-r2.png);
}
.i-img3 {
    background-image: url(../images/invite-r3.png);
}
.i-img4 {
    background-image: url(../images/invite-r4.png);
}
.i-img5 {
    background-image: url(../images/invite-r5.png);
}
.i-img6 {
    background-image: url(../images/invite-r6.png);
}
.i-img7 {
    background-image: url(../images/invite-r7.png);
}
.i-img8 {
    background-image: url(../images/invite-r8.png);
}
.i-img9 {
    background-image: url(../images/invite-r9.png);
}
 .btn-list {
    margin: .3rem auto 0;
    display: flex;
    justify-content: center;
    flex-direction: row;
}
 .btn-list span {
    margin: 0 .16rem;
    display: block;
    width: 2.02rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    font-size: .26rem;
    font-weight: 900;
    color: #f3fbd1;
    /* text-shadow: 0 0 2px #fff; */
    background-image: url(../images/btn5.png);
}

.btn-list span a{
    color: #f3fbd1;
}

.section5{
    background-image: url(../images/section5.webp);
}
.t4{
    background-image: url(../images/t4.png);
}
.section5 .main{
    position: relative;
    background-image: url(../images/main5.webp);
    width: 12rem;
    height: 7.6rem;
    margin: 0 auto;
    display: flex;
    color: #a42721;
    padding: .62rem 1rem 0;
    justify-content: space-between;
}
.uploading{
    /* background-image: url(../images/uploading.png); */
    /* width: 5.39rem; */
    /* height: 1.21rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.uploading .min-title{
    
margin-bottom: .24rem;
}
.subscript{
    display: block;
    background-image: url(../images/uploading.png);
    width: 5.39rem;
    height: 1.21rem;
    margin: 0rem auto .3rem;
}
.upload-itm{
    background: #fff;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .24rem;
}
.upload-img{
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.upload-img .upload-file{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.upload-img .upload-file p{
    font-size: .2rem;
    margin-bottom: .04rem;
}
.upload-img .upload-file .file-itm{
    width: 1rem;
    height: 1rem;
    position: relative;
    display: flex;
    font-size: 0;
    border-radius: 6px;
    cursor: pointer;
    /* overflow: hidden; */
}
.upload-img .upload-file input{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.upload-img .upload-file label{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: url(../images/add.png) no-repeat center #fff4be;
    background-size: auto;
    border: 1px #a42721 dashed;
    cursor: pointer;
    border-radius: 2px;
}
.upload-img .upload-file a{
    display: block;
    width: 1.10rem;
    height: .4rem;
    line-height: .4rem;
    text-align: center;
    font-size: .16rem;
    color: #fffde8;
    background-image: url(../images/upload-but.png);
    cursor: pointer;
}
.u-itm{
    width: 1rem;
    height: 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.u-img{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 5;
    align-items: center;
    justify-content: center;
    background: #000000a1;
    z-index: 20;
}
.u-img img{
    height: 100%;
    width: auto;
}
.u-img span{
    display: none;
    position: absolute;
    background: url(../images/minus.png) no-repeat center #0000008a;
    background-size: auto;
    border: 1px solid #fff;
    width: 100%;
    height: 100%;
    line-height: 100%;
    justify-content: center;
    align-items: center;
}
.upload-file:hover span{
    display: flex;
}

.upload-text{
    width: 5rem;
    min-height: .6rem;
    background: #f9f4e2;
    margin-top: .2rem;
    border-radius: 6px;
}
.upload-exp{
    margin: .1rem auto .3rem;
}
.upload-but{
    display: flex;
    justify-content: center;
}
.upload-but a{
    display: block;
    width: 2.36rem;
    height: .61rem;
    line-height: .61rem;
    text-align: center;
    background-image: url(../images/upload-but.png);
    color: #fffde8;
    margin: 0 .1rem;
    font-size: .28rem;
    cursor: pointer;
}
.upload-but a.act{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

.upexplain{
    width: 49%;
}
.upexplain .min-title{
    margin-bottom: .24rem;
}
.upexplain-itm{
    line-height: .28rem;
}
.cat{
    width: 2.5rem;
    height: 2.8rem;
    background-image: url(../images/cat.png);
    position: absolute;
    right: -1.3rem;
    bottom: -.16rem;
}



.section6{
    background-image: url(../images/section6.webp);
}
.section6 .main{
    width: 14rem;
    display: flex;
    margin: 0 auto;
    color: #a42721;
    justify-content: space-between;
}
.award-rank{}
.award-rank ul{}
.award-rank ul li{}
.award-rank{
    width: 5.5rem;
    height: 7.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../images/award-rank.webp);
    justify-content: center;
    padding: 0 .25rem;
}
.award-rank ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    /* grid-template-rows: repeat(4, 1fr); */
    gap: 23px 8px;
}
.award-rank ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.award-rank ul li .pic{
    width: 1.1rem;
    height: 1.1rem;
    background-image: url(../images/crane-draw-pic.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    text-align: center;
    flex-direction: column;
    /* margin: .16rem 0 .1rem; */
    align-items: center;
    justify-content: center;
}
.award-rank ul li .pic img{
    max-width: .9rem;
    max-height: .9rem;
    object-fit: contain;
}
.award-rank ul li p{font-size: .14rem;text-align: center;margin-top: .06rem;width: 96%;}



.award-name{
    width: 7.8rem;
    height: 7.58rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../images/award-name.png);
}
.award-name ul{
    margin-top: .2rem;
}
.award-name ul li{
    width: 7.52rem;
    height: .9rem;
    background-image: url(../images/award-name-list-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .1rem 0;
}
.award-name ul li span{
    display: block;
    width: 1.6rem;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
    background-image: url(../images/award-name-span.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: #fff5df;
    font-size: .28rem;
    letter-spacing: 1px;
    text-shadow: 0 2px 2px rgb(5 5 5 / 80%);
}
.award-name ul li div{
    width: calc(100% - 2rem);
    padding: 0 .2rem;
}



.section7{
    background-image: url(../images/section7.webp);
    height: 15.2rem;
}
.number{
    text-align: center;
    font-size: .32rem;
}
.number span{
    color: #f0ce47;
}
.work-con {
    position: relative;
    margin: 0 auto;
    padding-top: .24rem;
    width: 14rem;
    max-width: 94%;
    font-size: .2rem;
}
.btn-list {
    display: flex;
    align-items: center;
}
.work-con .btn-list {
    justify-content: space-between;
    margin: 0 .26rem .2rem;
}
.work-con .btn-list .item-1 {
    display: flex;
    align-items: center;
}
.search-input {
    display: flex;
    width: 4rem;
    max-width: 96%;
    border-radius: 6px;
}
.search-input .search-btn {
    display: block;
    width: 1.2rem;
    height: calc(100% - 2px);
    height: .44rem;
    line-height: .38rem;
    text-align: center;
    font-size: .2rem;
    background-image: url(../images/search-btn.png);
    border-radius: 0 6px 6px 0;
    transition: background-color .6s ease;
}
.search-input input {
    flex: 1;
    padding: .04rem .1rem;
    height: .44rem;
    line-height: .44rem;
    font-size: .16rem;
    box-sizing: border-box;
    border-radius: 6px 0 0 6px;
    background: no-repeat;
    color: #f3fbd1;
    border: 1px solid #fff5df;
}
.btn {
    color: #f3fbd1;
    text-align: center;
    text-shadow: 0 1px 3px rgb(5 5 5 / 80%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: transform .6s ease;
}
.sort-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: .44rem;
    line-height: .44rem;
    font-size: .2rem;
    background-image: url(../images/btn5.png);
    background-size: 100% 100%;
}
.sort-btn i {
    width: .24rem;
    height: .24rem;
    background: url(../images/orders.png) no-repeat center;
    background-size: contain;
}
.vRule-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 .16rem;
    width: 1.4rem;
    height: .44rem;
    line-height: .44rem;
    font-size: .2rem;
    background-image: url(../images/btn9.png);
    background-size: 100% 100%;
    color: #a42721;
    text-shadow: 0 1px 3px rgb(255 255 255 / 80%);
}
.vRule-btn i {
    margin-right: .03rem;
    width: .23rem;
    height: .23rem;
    background: url(../images/icon-rules.png) no-repeat center;
    background-size: contain;
}
.work-con p.uNum{
    font-size: .2rem;
    color: #fffad6;
    cursor: pointer;
}
.work-con p.uNum em{
    color: #f0ce47;
}
.work-con ul.sec-1 {
    display: flex;
    flex-wrap: wrap;
    min-height: 10rem;
}
.work-con p {
    margin-bottom: .02rem;
    text-align: center;
    color: black;
}
.after-login {
    display: none;
    padding: 0 0.2rem;
    width: auto;
    height: 0.48rem;
    line-height: .46rem;
    font-size: .18rem;
    background-size: 100% 100%;
}

.work-con ul.sec-1 li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 .32rem 0.2rem;
    width: 3.27rem;
    height: 4.5rem;
    background: url(../images/w-bg.png) no-repeat center;
    background-size: contain;
}
.work-con ul.sec-1 li {}
.work-con ul.sec-1 li .box {
    position: relative;
    width: calc(100% - 0.08rem);
    height: calc(100% - 0.08rem);
    box-sizing: border-box;
    padding-top: .06rem;
}



.s-pagination {
    margin: .1rem auto;
    text-align: center;
    justify-content: center;
}

.s-pagination li.selected,
.s-pagination li:hover {
    background: #bb231b;
}

.s-pagination li.selected a,
.s-pagination li:hover a,
.s-pagination li.selected,
.s-pagination li:hover {
    color: #f9f4e1;
}

.s-pagination {
    font-size: .22rem;
    display: flex;
    align-items: stretch;
}

.s-pagination li {
    border: 1px solid #f9f3e1;
    white-space: nowrap;
    display: inline-flex;
    list-style-type: none;
    padding: 0.06rem 0.2rem;
    margin: 0 0.08rem;
    cursor: pointer;
    border-radius: 6px;
    align-items: center;
}

.s-pagination li a {
    color: red;
}

.s-pagination li.prev,
.s-pagination li.next {
}

.s-pagination li.prev a,
.s-pagination li.next a,
.s-pagination li.prev,
.s-pagination li.next {
}

.s-pagination .selected {
    background: none;
    font-weight: bold;
}

.s-pagination li.prev.disabled,
.s-pagination li.next.disabled {
    opacity: .5;
}
.work-con .work-img {
    display: block;
    width: 3.08rem;
    height: 2.83rem;
    margin: 0 auto;
    /* position: absolute; */
    top: .06rem;
    bottom: .06rem;
    right: .06rem;
    left: .06rem;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}
.work-con .work-img span{
    width: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #684443;
}
.work-con .work-img span em{
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: .16rem;
    height: .37rem;
    line-height: .37rem;
    background-image: linear-gradient(to bottom, #421311, #421311, #421311c9, #42131100);
}
.work-con .work-img span img{

}
.work-con .item-info {
    margin: auto;
    color: #604142;
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
    font-size: .2rem;
}
.work-con .item-info .line-1 {
    display: flex;
    margin-bottom: .02rem;
    background: #eadcc9;
    height: .4rem;
    line-height: .4rem;
    text-align: center;
    justify-content: center;
}
.work-con .item-info .line-1 .username {
    padding-right: .02rem;
}
.work-con .item-info .line-1 .serverName {
    position: relative;
    padding-left: .06rem;
}
.work-con .item-info .line-1 .serverName::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: .06rem;
    width: .03rem;
    height: .03rem;
    background-color: #604142;
    border-radius: .03rem;
}
.work-con .item-info .line-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .09rem 0;
    font-size: .2rem;
    width: calc(100% - 20px);
    margin: 0 auto;
}
.work-con .item-info .line-2 .votes b {
    padding-right: .02rem;
    font-size: .32rem;
    font-weight: 700;
    color: #b33029;
}
.work-con .item-info .line-2 .vote-btn {
    margin: 0px -5px 0 0;
    width: .9rem;
    height: .34rem;
    line-height: .34rem;
    text-align: center;
    background-image: url(../images/btn6.png);
    color: #f8f3df;
}
.work-con .item-info .line-3 {
    display: flex;
    /* position: absolute; */
    bottom: -0.06rem;
    left: 0;
    width: 100%;
    border-top: 1px solid #d1b4a3;
}
.work-con .item-info .line-3 .line-3-left {
    border-right: 1px solid #d1b4a3;
}
.work-con .item-info .line-3 div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: .48rem;
    line-height: .48rem;
    text-align: center;
    cursor: pointer;
}
.work-con .item-info .line-3 div .icon {
    width: .22rem;
    height: .22rem;
    margin-right: .03rem;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.work-con .item-info .line-3 div .icon.mx-icon {
    background-image: url(../images/mx-icon.png);
}
.work-con .item-info .line-3 div .icon.fb-icon {
    background-image: url(../images/fb-icon.png);
}
.score-btn {
    position: absolute;
    top: .16rem;
    left: .14rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .12rem;
    font-weight: 600;
    text-indent: 0;
    letter-spacing: 0;
    cursor: pointer;
    text-shadow: 0 1px 5px #161616;
}
.score-btn .score-icon {
    width: .36rem;
    height: .36rem;
    background-image: url(../images/score-icon.png);
}
.more-btn {
    margin: .4rem auto 0;
    width: 1.62rem;
    height: .46rem;
    line-height: .46rem;
    text-align: center;
    background-image: url(../images/login-btn.png);
    background-size: 100% 100%;
}
.rank-mark {
    position: absolute;
    top: -.16rem;
    right: -.16rem;
    width: .72rem;
    height: .72rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.oRankNum1 .rank-mark {
    background-image: url(../images/orm1.png);
}
.oRankNum2 .rank-mark {
    background-image: url(../images/orm2.png);
}
.oRankNum3 .rank-mark {
    background-image: url(../images/orm3.png);
}
.mRankNum1 .rank-mark {
    background-image: url(../images/mrm1.png);
}
.mRankNum2 .rank-mark {
    background-image: url(../images/mrm2.png);
}
.mRankNum3 .rank-mark {
    background-image: url(../images/mrm3.png);
}
.score-info {
    position: absolute;
    left: 0;
    right: 0;
    top: .56rem;
    margin: auto;
    width: 1.9rem;
    padding: .24rem;
    color: #604142;
    font-size: .16rem;
    background: rgba(255, 255, 255, .8);
    box-sizing: border-box;
}
.score-info .close-btn {
    position: absolute;
    top: .06rem;
    right: .06rem;
    width: .2rem;
    height: .2rem;
    background-image: url(../images/close-btn1.png);
}
.score-info em {
    display: block;
    line-height: 1;
    font-size: .18rem;
    color: #e87877;
    font-weight: 700;
}
.pages {
	display: flex;
	justify-content: center;
    margin: 0.5rem auto 0;
    height: auto;
}
.pages ul {
	position: relative;
	display: flex;
}
.pages ul li {
	display: flex;
	height: .44rem;
	line-height: .44rem;
	text-align: center;
	cursor: pointer;
	background: url(../images/page-bg.png) no-repeat center;
}
.pages ul li em.act, .pages ul li em:hover {
	color: #8b4c4e;
	background: #e6c9b9;
}
.pages ul li:first-child, .pages ul li:nth-last-of-type(2) {
	display: block;
	flex: inherit;
}
.pages ul li:first-child {
	background: url(../images/page-bg.png) no-repeat left;
}
.pages ul li:nth-last-of-type(2) {
	background: url(../images/page-bg.png) no-repeat right;
}
.pages .pre-btn {
    padding: 0 0.3rem 0 0.34rem;
    width: 0.2rem;
    height: 0.2rem;
	background: url(../images/pre.png) no-repeat center;
	background-size: contain;
}
.pages .next-btn {
	padding: 0 .34rem 0 .3rem;
	width: 0.2rem;
    height: 0.2rem;
	background: url(../images/next.png) no-repeat center;
	background-size: contain;
}
.pages ul li:last-child {
	position: absolute;
	right: -.66rem;
	width: auto;
	height: .44rem;
	color: #9b5558;
	line-height: .44rem;
	font-weight: normal;
	background: none;
	border-radius: 4px;
	cursor: unset;
}
.pages ul li em {
    margin-top: .01rem;
	height: .42rem;
	width: .44rem;
	line-height: .42rem;
	font-style: normal;
	border-right: 1px solid #bc8077;
	cursor: pointer;
}
.pages ul li em:first-child {
	border-left: 1px solid #bc8077;
}
.pagination{
    color: #f8f3df;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .2rem;
}
.pagination a{
    background: #f8f3df;
    height: .5rem;
    line-height: .5rem;
    color: #333;
    width: 1.1rem;
    text-align: center;
    border-radius: 6px;
}
.pagination ul{}
.pagination ul li{
    width: .5rem;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    border: 1px solid #f8f3df;
    border-radius: 6px;
    margin: 0 .13rem;
    background: none;
    cursor: pointer;
}
.pagination ul li.act{
    background: #bb231b;
}
.pagination span{
    margin: 0 0 0 .2rem;
}





.section8{
    background-image: url(../images/section8.webp);
}
.section8 .main{
    width: 14rem;
    margin: 1.3rem auto 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.ranking-l{
    color: #b33029;
    font-size: .2rem;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ranking-l ul{
    display: flex;
    justify-content: center;
    margin-top: .84rem;
    position: relative;
    width: 100%;
}
.ranking-l ul li{
    padding-bottom: .16rem;
    width: 2.64rem;
    height: 3.06rem;
    text-align: center;
    background: url(../images/rank-bg.png) no-repeat center;
    background-size: contain;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(.9);
    position: absolute;
}
.ranking-l ul li.ind2{
    left: -.4rem;
}
.ranking-l ul li.ind1{
    transform: scale(1);
    position: relative;
    bottom: .6rem;
}
.ranking-l ul li.ind3{
    right: -.4rem;
}

.ranking-l ul li .r-num{
    width: 1.16rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    background-image: url(../images/r-num.png);
    color: #fefdee;
    font-size: .64rem;
}
.ranking-l ul li .r-name{
    font-size: .2rem;
    margin: .12rem;
}
.ranking-l ul li .r-server{
    font-size: .14rem;
}
.ranking-l .hint{
    color: #fffde8;
}
.ranking-exp{
    display: block;
    width: 2.36rem;
    height: .61rem;
    line-height: .61rem;
    text-align: center;
    background-image: url(../images/upload-but.png);
    color: #fffde8;
    margin: 0 .1rem;
    font-size: .28rem;
    cursor: pointer;
}
.ranking-r{
    width: 5.7rem;
    height: 6.56rem;
    background-image: url(../images/ranking-r.webp);
    color: #b33029;
    font-size: .2rem;
    position: relative;
}
.ranking-r ul{
    height: 5.1rem;
    overflow: overlay;
}
.ranking-r ul::-webkit-scrollbar {
    width: 6px;
}

.r-title{
    height: .6rem;
    color: #fffde8;
    font-size: .22rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.ranking-r ul li{
    display: flex;
    justify-content: space-around;
    line-height: .5rem;
    border-bottom: 1px solid;
}

.ranking-r ul li span,.person span,.r-title span{
    display: block;
    width: 20%;
    text-align: center;
}
.ranking-r ul li span:nth-child(2),.ranking-r ul li span:nth-child(2),
.person span:nth-child(2),.person span:nth-child(2),
.r-title span:nth-child(2),.r-title span:nth-child(2){
    width: 42%;
}
.person{
    position: absolute;
    bottom: .18rem;
    left: 0;
    width: 100%;
    background: #c03f38;
    color: #fffde8;
    font-size: .24rem;
    height: .7rem;
    line-height: .7rem;
    border-bottom: 2px solid #92201b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.section9{
    background-image: url(../images/section9.webp);
    display: flex;
    flex-direction: column;
    text-align: center;
}
.t8{
    background-image: url(../images/t5.png);
}
.section9 .main{
    width: 14rem;
    margin: 0 auto;
    line-height: .36rem;
    font-size: .16rem;
    color: #fffde8;
    text-align: left;
}

/*
footer
*/

.footer {
    width: 100%;
    /* padding-top: 6px; */
    /* height: 74px; */
    position: relative;
    overflow: hidden;
    background-color: #562525;
    z-index: 99;
    border-top: 4px solid #d4c7a0;
    color: #fff;
}

.foot {
    width: 1000px;
    height: 100%;
    margin: .3rem auto;
    display: flex;
    align-items: center;
}

.foot span {
    font-family: Microsoft YAHEI;
    font-size: .16rem;
}

.fl {
    float: left;
    display: flex;
    width: 748px;
    text-align: left;
    align-items: center;
}

.fl>div {
    text-align: left;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.fl>div:first-child {
    width: 150px;
}

.fl>div:last-child {
}

.footer .fl img:nth-child(2) {
    height: 31px;
    width: 104px;
    margin-top: 4px;
}

.footer .fl img {
    width: 2rem;
}

.fl span {
    display: block;
    margin-top: .06rem;
}

.fr {
    float: right;
    width: 3rem;
    display: flex;
    align-items: center;
}

.footer .fr img {
    float: left;
    width: .6rem;
    margin-right: .1rem;
    border: 1px solid #5f5f5f;
    border-right: 0;
}

.fr span {
    width: 192px;
    float: right;
}
/* pop */
.popBox { 
    /* display: none; */
     position: fixed; right: 0; top: 0; z-index: 900; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7);}
.show { display: block; }
.close-btn {position: absolute;right: -.26rem;top: -0.12rem;z-index: 10;width: 1.01rem;height: 2.42rem;background: url(../images/pop-close.png) no-repeat center;background-size: contain;cursor: pointer;}
.popBox-main {
    width: 11.35rem;
    height: 7.5rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: auto;
    z-index: 10;
    padding: .3rem .7rem 0 .56rem;
    /* width: auto; */
    max-width: 8.31rem;
    max-height: 5.16rem;
    background: url(../images/pop-bg.png) no-repeat center;
    background-size: contain;
    box-sizing: border-box;
    }
.popBox:not(.pop-login,.pop-lock-award-in,.pop-copy) .popBox-main::after, .popBox:not(.pop-login,.pop-lock-award-in,.pop-copy) .popBox-main::before { content: ""; position: absolute; top: 0.04rem; width: .48rem; height: 2.1rem; background: url(../images/lantern3.png) no-repeat center; background-size: contain; }
.popBox-main::after { left: 0; }
.popBox-main::before { right: 0; }
.popBox-main h3 {position: relative;display: flex;justify-content: center;align-items: center;margin-bottom: .2rem;text-align: center;font-size: .42rem;font-family: 'Noto Serif TC' , serif;font-weight: 900;color: #a42721;}
.popBox-main h3::after, .popBox-main h3::before {content: "";width: .66rem;height: .13rem;background: url(../images/grade-list-icon.png) no-repeat center;background-size: contain;}
.popBox-main h3::after {/* margin-left: .32rem; */transform: scaleX(-1);}
.popBox-main h3::before {/* margin-right: .32rem; *//* transform: scaleX(-1); */}
/* login-pop */
.pop-login .popBox-main, .pop-lock-award-in .popBox-main,.pop-copy .popBox-main {
    /* padding: .5rem .8rem; */
    /* background-image: url(../images/pop-bg2.png); */
    /* background-size: 100% 100%; */
}
.pop-login .popBox-main h3, .pop-lock-award-in .popBox-main h3, .pop-copy .popBox-main h3 {
    /* color: #ffdc6a; */
}
.pop-login .close-btn, .pop-lock-award-in .close-btn, .pop-copy .close-btn  {
    /* top: 0; */
    /* right: -.46rem; */
    /* width: .36rem; */
    /* height: .36rem; */
    /* background-image: url(../images/pop-close2.png); */
}
.pop-login .popBox-main h3::after, .pop-login .popBox-main h3::before,
.pop-lock-award-in .popBox-main h3::after, .pop-lock-award-in .popBox-main h3::before,
.pop-copy .popBox-main h3::after, .pop-copy .popBox-main h3::before {
    background-image: url(../images/grade-list-icon.png);
}
.pop-hint{
    font-size: .3rem;
    text-align: center;
    color: #a42721;
}
.form-login-before, .form-server, .pop-rules .rules-list, .pop-reward .reward-list,.pop-copy .rules-list {
    position: relative;
    z-index: 10;
    min-width: 4rem;
}
.login-title {
    background-image: url(../images/pop-t1.png);
}
.login-tips, .server-tips {
	text-align: center;
	color: #a42721;
}
.login-form {
	margin: 0 auto;
	width: 100%;
}
.login-form .item {
	display: flex;
	align-items: center;
	margin: .2rem auto 0;
	width: 4.8rem;
	height: .5rem;
	/* background-color: #f4f4f5; */
	border: 1px solid #771919;
	border-radius: 4px;
	box-sizing: border-box;
}
.login-form .item.lg_b-btn {
    margin-top: .4rem;
}
.login-form .item em {
    margin-right: .16rem;
    width: .8rem;
    height: 100%;
    background-color: #771919;
    background-size: 30%;
}
.login-form .item .icon-user {
	background-image: url(../images/user-icon.png);
}

.login-form .item .icon-pwd {
    background-image: url(../images/pwd-icon.png);
}
.login-form input {
    flex: 1;
    width: calc(100% - .96rem);
    padding: .06rem .1rem;
    height: 100%;
    outline: none;
    background: none;
    border: none;
    box-sizing: border-box;
    font-size: .18rem;
}
#LA_code_box .num_th_ip {
    margin-right: .1rem;
    border-radius: 6px;
}
.yzm_b::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.login-form .item#LA_code_box {
    padding: 0 .32rem 0 0.2rem;
}
.login-form .btn-list .btn{
    margin: .3rem .15rem 0;
    width: 1.8rem;
    height: 0.56rem;
    line-height: .56rem;
    font-size: .23rem;
    background-size: 100% 100%;

}
#LA_code {
    float: left;
    width: calc(100% - 1.2rem);
    padding: 0.06rem 0.1rem;
    height: 0.48rem;
    line-height: .48rem;
    color: #562525;
    outline: none;
    background: none;
    border: none;
    box-sizing: border-box;
    border-radius: 6px;
}
.yzm-a {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: .48rem;
    background-color: #fff;
    border-radius: 6px;
}
.yzm-a img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.lg_b-btn a {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: .58rem;
	font-size: .24rem;
	font-weight: 500;
	line-height: .58rem;
	text-align: center;
    color: #fff;
	background: url(../images/nav-li-bg.png) no-repeat center;
    background-size: contain;
    cursor: pointer;
    transition: transform .6s ease;
}
.lg_b-btn a:hover {
	transform: translateY(-.02rem);
}
.login-form .btn-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: .4rem 0 0 0;
    color: #000;
}
.pop-login .facebook-link {
	display: inline-block;
	margin: .1rem;
	height: .4rem;
	width: .4rem;
	background: url(../images/pop-fb.png) no-repeat center;
	background-size: contain;
	border-radius: 7px;
	cursor: pointer;
}
.pop-login .line-link {
	display: inline-block;
	margin: .1rem;
	height: .4rem;
	width: .4rem;
	background: url(../images/pop-line.png) no-repeat center;
	background-size: contain;
	border-radius: 7px;
	cursor: pointer;
}
.serveBox,.roleBox {
	display: flex;
	margin: .2rem auto;
	width: 4.8rem;
	height: .5rem;
	line-height: .5rem;
	border: 1px solid #771919;
	border-radius: 4px;
	box-sizing: border-box;
	position: relative;
}
.serveBox span ,.roleBox span {
	width: 1.3rem;
	text-align: center;
	background: #771919;
	box-sizing: border-box;
}
.serveBox ul ,.roleBox ul {
    position: relative;
    border: none;
    width: 100%;
    height: 98%;
}
.serveBox ul ,.roleBox ul {
    padding: 0 .1rem;
    color: #562525;
    box-sizing: border-box;
    background: #fff;
    flex-direction: column;
    position: absolute;
    top: .0rem;
    left: 1.2rem;
    z-index: 1;
    width: calc(100% - 1.3rem);
    height: 4rem;
    overflow: auto;
    text-align: center;
}
.serveBox ul#box_scs::after,.roleBox ul#box_scs::after {
    content: "";
    position: absolute;
    right: .1rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #771919 transparent transparent transparent;
    transition: transform .2s ease-in;
}
.serveBox ul#box_scs.sle::after,.roleBox ul#box_scs.sle::after {
    transform: rotate(180deg);
}
.serveBox ul li,.roleBox ul li{

border-bottom: 1px solid rgba(119 25 25 / 37%);
}
.serveBox select{
    width: calc(100% - 1.3rem);
    background: none;
    text-align: center;
}
.serveBox option{}
.roleBox{}
.roleBox ul{height: auto;background: none;}
.roleBox ul li{
    border: none;
}
.roleBox em{
    color: #771919;
    width: calc(100% - 1.3rem);
    text-align: center;
}

.pop-login .btn {
    margin: .36rem auto 0;
    width: 4.2rem;
    height: .7rem;
    line-height: .7rem;
    text-align: center;
    font-size: .3rem;
    font-weight: 900;
    letter-spacing: .1rem;
    text-indent: .1rem;
    background-image: url(../images/btn3.png);
}

.popBox-main .rules-list {
    width: 100%;
    max-height: 3.7rem;
    overflow: auto;
    color: #333333;
}
.popBox-main .rules-list::-webkit-scrollbar {
    width: 6px;
}
.popBox-main .rules-list::-webkit-scrollbar-track {
    background-color: #fff5df;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

.popBox-main .rules-list::-webkit-scrollbar-thumb {
    background-color: #f0ce47;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}


.popBox-main .rules-list p {
    position: relative;
    padding-left: .24rem;
    margin-bottom: .16rem;
}
.popBox-main .rules-list em {
    display: block;
    position: absolute;
    top: .03rem;
    left: 0;
    width: .2rem;
    height: .2rem;
    line-height: .2rem;
    text-align: center;
    letter-spacing: 0;
    text-indent: 0;
    font-size: .14rem;
    background: url(../images/num-bg.png) no-repeat center;
    background-size: contain;
}

.pop-reward .popBox-main, .pop-rank-dec .popBox-main {
    /* padding: 0.68rem 1.1rem; */
    /* width: 9.08rem; */
    /* height: 6rem; */
    /* width: 11.35rem;
    height: 7.5rem; */
}
.pop-reward .popBox-main::after { left: 0; }
.pop-reward .popBox-main::before { right: 0; }
.pop-reward .close-btn {}
.pop-reward .reward-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 2;
    max-height: 3.6rem;
    min-height: 3rem;
    overflow-y: auto;
}
.pop-reward .reward-list ul {
    padding: 0 .08rem;
    width: 100%;
}
.pop-reward .reward-list ul li {
    display: flex;
    width: 100%;
    justify-content: space-between;
    text-align: center;
    color: #333;
    background-color: #fffdf8;
}
.pop-reward .reward-list ul li:nth-child(odd) {
    background-color: #f9ebc8;
}
.pop-reward .reward-list ul li:first-child {
    position: sticky;
    top: 0;
}
.pop-reward .reward-list ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    min-height: .4rem;
    font-size: .14rem;
    line-height: .4rem;
    box-sizing: border-box;
}
.pop-reward .reward-list ul li span:first-child {
    border-right: 1px solid #ddd3b8;
}
.pop-reward .reward-list ul li:nth-child(1) {
    color: #fff;
    background: #cf563b;
    background-size: cover;
}

.pop-lock-award .popBox-main, .pop-rules .popBox-main {
    width: 11.35rem;
    height: 7.5rem;
}
.pop-lock-award .tips{
    color: #333;
}
.pop-design{
    color: #a42721;
}
.pop-design .popBox-main{
    max-height: 7.5rem;
    background-size: 100% 100%;
    padding: .4rem .9rem 0 .77rem;
}
.pop-design .reward-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    max-height: 4.5rem;
    min-height: 3rem;
    overflow-y: inherit;
    /* padding: 0 .26rem; */
    position: absolute;
    width: calc(100% - 1.6rem);
    box-sizing: border-box;
}
.d-title{position: absolute;width: 100%;padding-bottom: .2rem;background: #fffdec;}
.d-title h4{
    font-size: .26rem;
    font-weight: bold;
    margin-bottom: .06rem;
}
.d-title .d-introduce{
    display: flex;
}
.d-title .d-introduce span{
    font-weight: bold;
    display: inline-table;
    margin-right: .1rem;
}
.d-title .d-introduce p{
    width: 66%;
}
.d-title .vote-btn{
    width: .9rem;
    height: .34rem;
    line-height: .34rem;
    text-align: center;
    background-image: url(../images/btn6.png);
    color: #f8f3df;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
 .d-img{

max-height: 6.2rem;

min-height: 3rem;

overflow-y: auto;

margin-top: .7rem;

width: 100%;
}
.d-img img{
    max-width: 100%;
    margin: .2rem auto;
}




.lock-award-list {
    display: flex;
    flex-wrap: wrap;
    margin: .26rem 0 0;
    max-height: 3rem;
    overflow: auto;
}
.lock-award-list li {
    margin: 0 0.3rem 0.2rem;
    width: 1rem;
    text-align: center;
    list-style: none;
    color: #333;
    font-size: .14rem;
}
.lock-award-list li span, .lock-awrad {
    display: block;
    margin: auto;
    width: .9rem;
    height: .9rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.la1 {
    background-image: url(../images/lock-a1.png);
}
.la2 {
    background-image: url(../images/lock-a2.png);
}
.la3 {
    background-image: url(../images/lock-a3.png);
}
.la4 {
    background-image: url(../images/lock-a4.png);
}
.la5 {
    background-image: url(../images/lock-a5.png);
}
.la6 {
    background-image: url(../images/lock-a6.png);
}
.la7 {
    background-image: url(../images/lock-a7.png);
}
.la8 {
    background-image: url(../images/lock-a8.png);
}
.la9 {
    background-image: url(../images/lock-a9.png);
}
.la10 {
    background-image: url(../images/lock-a10.png);
}
.la11 {
    background-image: url(../images/lock-a11.png);
}
.la12 {
    background-image: url(../images/lock-a12.png);
}
.la13 {
    background-image: url(../images/lock-a13.png);
}
.la14 {
    background-image: url(../images/lock-a14.png);
}
.la15 {
    background-image: url(../images/lock-a15.png);
}
.la16 {
    background-image: url(../images/lock-a16.png);
}
.la17 {
    background-image: url(../images/lock-a17.png);
}
.la18 {
    background-image: url(../images/lock-a18.png);
}
.la19 {
    background-image: url(../images/lock-a19.png);
}
.la20 {
    background-image: url(../images/lock-a20.png);
}
.pop-lock-award h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .1rem;
    font-size: .2rem;
    font-weight: 700;
}
.pop-lock-award h4::after, .pop-lock-award h4::before {
    content: "";
    width: .15rem;
    height: .09rem;
    background: url(../images/pop-title-bg2.png) no-repeat center;
    background-size: contain;
}
.pop-lock-award h4::after {
    margin-left: .18rem;
    transform: scaleX(-1);
}
.pop-lock-award h4::before {
    margin-right: .18rem;
}

.awrad-img {
    margin-bottom: .4rem;
    text-align: center;
    color: #ffdc6a;
}
.pop-draw .reward-list{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pop-draw-pic{
    width: 1.4rem;
    margin-top: .2rem;
}
.pop-draw-name{
    font-size: .3rem;
    color: #a42721;
}
.pop-draw-hint{
    font-size: .16rem;
    color: #000;
    margin-top: .5rem;
}
.pop-copy .rules-list{
    
height: calc(100% - 2rem);
    
display: flex;
    
flex-direction: column;
    
justify-content: center;
}

.pop-copy #input_link {
    padding: 0rem 0.2rem;
    height: .56rem;
    width: 5rem;
    margin: auto;
    display: block;
    border: 1px solid #a42721;
    border-radius: 6px;
    text-align: center;
    font-size: .2rem;
}
.pop-copy .copy-btn {
    margin: 0.36rem auto 0;
    width: 2.54rem;
    height: 0.64rem;
    line-height: .62rem;
    text-align: center;
    font-size: .3rem;
    font-weight: 900;
    letter-spacing: .1rem;
    text-indent: 0.1rem;
    background-image: url(../images/btn4.png);
}

/* E pop */

.gear{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0 0 0 / 50%);
}


@media (max-width: 1440px) {
    html { font-size: calc(100 * 100vw / 1680); }
}
@media (max-width: 900px) and (min-width: 450px) {
    html { font-size: calc(100 * 100vw / 1336); }
}
@media (max-width: 450px) {
    html { font-size: calc(100 * 100vw / 750); }
    body { font-size: .14rem; }
    .hint {
        width: 96%;
        margin: 0 auto;
        font-size: .24rem;
    }
    .img{
        /* background-size: cover; */
    }
    .section{
        overflow: hidden;
    }
    .navigation{
    background: rgba(0 0 0 / 72%);
    height: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}
    .menu{
        position: inherit;
        left: .2rem;
        top: .2rem;
        width: .7rem;
        height: .52rem;
        background-image: url(../images/menu.png);
        z-index: 200;
        display: block;
        cursor: pointer;
    }
    .menu.act{
        background-image: url(../images/menu2.png);
    }
    nav{
        left: 0;
        top: 1rem;
        padding: 0;
        width: 100%;
        height: 0;
        background: linear-gradient(to bottom, rgba(28 22 60), rgba(0, 0, 0, 0));
        transform: none;
        overflow: hidden;
        transition: height .2s ease-in;
    }
    nav.navShow {
        height: calc(100vh - 1rem);
    }
    nav ul{}
    nav ul li{
        line-height: 2;
    }
    nav ul li a{
        color: #fff;
        font-size: .3rem;
    }
    nav ul li.appstore a,nav ul li.google a,nav ul li.fb a{
        width: 2.1rem;
        height: 0.8rem;
        margin: 0 auto;
        display: block;
    }
    .sidebar.navShow {
        height: calc(100vh - 1rem);
    }
    .section1{
        background-image: url(../images/mobile/section1-m.jpg);
        height: 13.33rem;
    }
    .login-itm{
        right: .2rem;
        top: .2rem;
        position: inherit;
    }
    .logo{
        width: 2.24rem;
        height: .9rem;
        left: .2rem;
        top: 1rem;
    }
    .solgan{
        right: 0;
        left: 0;
        top: 2rem;
    }
    .solgan .solgan-pic{
        width: 6.57rem;
        height: 4.48rem;
    }
    .solgan .solgan-time{
        width: 6.9rem;
        height: .7rem;
        display: none;
    }
    .message{
        width: 6.88rem;
        height: .7rem;
        left: 0;
        right: 0;
        bottom: 1rem;
        margin: auto;
        background-size: 100% 100%;
        font-size: .22rem;
    }
    .message .btn-submit{
        width: 1.9rem;
        height: .64rem;
        font-size: .36rem;
    }
    .section2{
        background-image: url(../images/mobile/section2-m.jpg);
        height: 14.79rem;
    }
    .grade-list{
        width: 100%;
    }
    .grade-list ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .grade-list ul li{
        width: 2rem;
        height: 3.3rem;
        margin: 0 .12rem 0.2rem;
    }
    .grade-list ul li h4 {
        margin-top: .1rem;
    }
    .grade-list ul li .pic{
        margin: .06rem 0 0rem;
    }
    .grade-list ul li em {
        margin-top: .1rem;
    }
    .progress-bar{
        display: none;
    }


    .section3{
        background-image: url(../images/mobile/section3-m.jpg);
        height: 29rem;
    }
    .section3 .main {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .announ{
        width: 96%;
        height: .6rem;
        font-size: .24rem;
    }
    .announ ul li{
        line-height: .6rem;
    }
    .role {
        width: 100%;
        background-image: url(../images/mobile/juese.png);
        background-position: top center;
        background-size: 120%;
        top: 3rem;
    }
    .crane-task ul{
        width: 100%;
    }
    .crane-task ul li{
        width: 100%;
        max-width: 6.9rem;
        height: .7rem;
        background-size: cover;
        font-size: .28rem;
    }

    .crane-task ul li:nth-child(1), .crane-task ul li:nth-child(5){
        right: 0;
    }
    .crane-task ul li:nth-child(2), .crane-task ul li:nth-child(4) {
        right: 0rem;
    }
    .crane-draw {
        width: 96%;
        margin-bottom: 8rem;
    }
    .crane-draw ul li p{
        font-size: .2rem;
    }
    .crane-draw ul li .pic{
        width: 1.5rem;
        height: 1.5rem;
    }
    .crane-task ul li a{
        width: 2rem;
        height: .7rem;
        font-size: .28rem;
    }
    .crane-task h3{
        margin-right: 0;
    }
    .crane-task {
        width:96%;
        align-items: center;
    }
    .crane-rule{
        width:96%;
        margin-top: .2rem;
    }
    .crane-rule h4 span{
        font-size: .32rem;
    }
    .rule-con{
        font-size: .24rem;
        max-height: 4.2rem;
    }
    .section4{
        background-image: url(../images/mobile/section4-m.jpg);
        height: 20.02rem;
    }
    .section4 .is-con{
        width: 96%;
    }
    .is-con-top .name{

width: 3.97rem;

height: 1.19rem;

top: -.6rem;

left: 0;

right: 0;

margin: 0 auto;

}
    .name.old-name{background-image: url(../images/mobile/sle-old.png);}
    .name.new-name{background-image: url(../images/mobile/sle-new.png);}
    .s2-box1{
        align-items: center;
        flex-direction: column;
        padding: 0;
        margin-top: 4rem;
    }
    .sle-item-2 {
        margin-top: .8rem;
        margin-left: 1.2rem;
    }
    .sle-title{
        background-image: url(../images/mobile/sle-title.png);
        top: 2rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 5.96rem;
        height: 2.26rem;
    }
    .sle-item-2 .sle-btn {
        right: 3.4rem;
    }
    .sle-img-on,.sle-img-on.act {
        display: none;
    }
    .section4 .reward-item {
        width: 100%;
        flex-direction: column;
        padding: .4rem .4rem;
    }
    .reward-item .is-left{
        width: 100%;
        margin-right:0;
        font-size: .24rem;
    }
    .r-box ul li{
        width: 1.8rem;
        height: 1.8rem;
    }
    .invite-code{
        width: 5.5rem;
        height: .6rem;
        background-size: 100% 100%;
    }
    .receive-nr-btn, .receive-or-btn{
        font-size: .38rem;
        width: 4rem;
        height: .8rem;
        line-height: .8rem;
    }
    .reward-item .is-right{
        font-size: .24rem;
    }
    .invite-reward-item ul li{
        font-size: .2rem;
    }
    .invite-reward-item ul{
        padding: .06rem 0;
    }
   .btn-list span{
        width: 2.5rem;
        height: .8rem;
        line-height: .8rem;
        font-size: .36rem;
    }

    .section5{
        background-image: url(../images/mobile/section5-m.jpg);
        height: 21.26rem;
    }
    .section5 .main {
        background-image: url(../images/mobile/main5.png);
        width: 7.3rem;
        height: auto;
        min-height: 16.92rem;
        margin: 0 auto;
        display: flex;
        padding: 1rem 0 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    .upexplain{
        width: 100%;
        margin-top: .3rem;
    }
    .upload-but a{
        
width: 2.5rem;
        
height: .8rem;
        
line-height: .8rem;
        
font-size: .3rem;
    }
    .upload-exp{
        font-size: .22rem;
        width: 88%;
        text-align: center;
    }
    .upexplain-itm{
        width: 88%;
        font-size: .24rem;
        margin: 0 auto;
        line-height: .4rem;
        max-height: 6.8rem;
        overflow: auto;
    }
    .upload-img div a{
        
width: 1.5rem;
        
height: .5rem;
        
line-height: .5rem;
        
font-size: .2rem;
    }
    .upload-img div p{
        font-size: .22rem;
    }
    .cat{
    right: -0.7rem;
    bottom: -1.9rem;
}
    .min-title{        
height: .8rem;        
line-height: .8rem;        
width: 4.8rem;        
background-size: contain;        
font-size: .36rem;
    }
    .upload-img .upload-file p{
        font-size: .2rem;
    }
    .upload-img .upload-file a{
        width: 1.5rem;
        height: .5rem;
        line-height: .5rem;
        font-size: .2rem;
    }
    .upload-text {
        width: 5rem;
        min-height: 1rem;
        margin-top: .2rem;
        border-radius: 6px;
        font-size: .22rem;
    }
    .section6{
        background-image: url(../images/mobile/section6-m.jpg);
        height: 20rem;
    }
    .section6 .main{
        width: 96%;
        justify-content: space-between;
    flex-direction: column;
    align-items: center;
    }
    .award-rank{
        width: 96%;
        margin: .2rem 0;
        background-size: 100% 100%;
        padding: .4rem 0.1rem;
    }
    .award-rank ul{
        gap: 12px 2px;
    }
    .award-name{
        width: 100%;
    }
    .award-name ul{
        width: 100%;
        margin-top: 0.5rem;
    }
    .award-name ul li{
        width: 100%;
    }
    .award-rank ul li p{
        font-size: .2rem;
    }
    .award-name ul li div{
        font-size: .2rem;
    }

    
    .section7{
        background-image: url(../images/mobile/section7-m.jpg);
        height: 27rem;
    }
    .btn-list{
    flex-direction: column;
}
.work-con .btn-list .item-1{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 10px;
    width: 100%;
    justify-content: center;
}
.sort-btn,.vRule-btn{
    width: 2.2rem;
    height: .7rem;
    line-height: .7rem;
    font-size: .3rem;
    margin: auto;
}
.work-con p.uNum{
    grid-column: 1 / -1;
    font-size: .3rem;
}
.search-input{
    width: 6.9rem;
    height: .6rem;
    line-height: .6rem;
    margin-top: .2rem;
}
.search-input input{
    height: .6rem;
    font-size: .28rem;
}
.search-input .search-btn{
    height: .6rem;
    line-height: .6rem;
    background-size: 100% 100%;
    font-size: .3rem;
}

    .work-con .item-info{
        font-size: .24rem;
    }
    .work-con .item-info .line-2 .vote-btn{
        font-size: .24rem;
    }
    .pagination{
        font-size: .22rem;
    }


    .section8{
        background-image: url(../images/mobile/section8-m.jpg);
        height: 19.9rem;
    }
    .section8 .main {
        width: 96%;
        margin: .8rem auto 0;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }
    .ranking-l {
        margin-bottom: .6rem;
        width: 90%;
    }
    .ranking-r{
        width: 100%;
        height: 8.6rem;
        background-size: 100% 100%;
    }
    .r-title{
        font-size: .3rem;
        height: .8rem;
    }
    .ranking-r ul{
        
height: 6.8rem;
    }
    .ranking-r ul li{
        line-height: .78rem;
        font-size: .3rem;
    }
    .person{
        font-size: .3rem;
    }



    .section9{
        background-image: url(../images/mobile/section9-m.jpg);
        height: 24.64rem;
    }
    .section9 .main{
        font-size: .24rem;
        width: 96%;
        margin: 0 auto;
        line-height: .48rem;
    }



    .foot {
        width: 100%;
        margin: .3rem auto;
        align-items: center;
        flex-direction: column;
    }
    .fl{
        display: flex;
        flex-direction: column;
    }
    .fl>div{
        width: 96%;
    }
    .foot span{
        font-size: .18rem;
    }
    .fr{
        width: auto;
        margin-top: .2rem;
    }
    .fr span{
        width: auto;
    }



    .popBox-main{
        width: 90%;
        height: 9rem;
        background-size: 100% 100%;
        font-size: .22rem;
    }
}