body {
    background: #8F1715;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #FFF6D9;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #FFF6D9;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #FFF6D9;
}

@font-face {
    font-family: 'CLOUDYUANCU';
    src: url("//png.pookcdn.net/new_net/lydr/activity5/fonts/CLOUDYUANCU-GB-NORMAL.TTF") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ruizi';
    src: url("//png.pookcdn.net/new_net/lydr/activity5/fonts/ruizi.TTF") format('truetype');
    font-weight: normal;
    font-style: normal;
}

button {
    font-family: 'CLOUDYUANCU';
}

.df.column {
    -webkit-flex-flow: column;
    flex-flow: column;
}


.ico-check input:checked+label {
    background-image: url(//png.pookcdn.net/new_net/bydrqp/activity_2/ico_check.png);
}

.ico-check input {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}

.wrapper {
    margin: 0 auto;
    width: 7.5rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg.jpg");
    font-family: 'ruizi';
    color: #fff;
    font-size: .2rem;
    overflow: hidden;
    box-sizing: border-box;
    background-size: 7.5rem 38.4rem;
}

.float-top {
    top: 0;
    left: 50%;
    padding: 0 .2rem 0 .15rem;
    width: 7.53rem;
    height: 1.21rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_top.png");
    font-family: "Adobe 黑体 Std";
    color: #fff;
    font-size: .4rem;
    line-height: 1.2;
    z-index: 120;
    box-sizing: border-box;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.float-top .name {
    font-family: 'CLOUDYUANCU';
}

.float-top .logo {
    margin-right: .15rem;
}

.float-top .logo img {
    width: 1.02rem;
}

.float-top .desc {
    display: block;
    font-size: .2rem;
    color: #ffe787;
    white-space: nowrap;
}

.float-top .btn-download-top {
    top: .2rem;
    right: .2rem;
    width: 2.39rem;
    height: .73rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/btn_download_top.png");
}

.float-top .start-list {
    font-size: .19rem;
}

.float-top .ico-star {
    display: inline-block;
    width: .21rem;
    height: .2rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/ico_star.png");
}

.btn-online-service,
.btn-ruler,
.ico-exchange {
    top: 1.4rem;
    right: .2rem;
    width: .93rem;
    height: .97rem;
}

.btn-ruler {
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico_ruler.png");
}

.btn-online-service {
    top: 2.5rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico_service.png");
}

.ico-exchange {
    top: 3.6rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico_exchange.png");
}

.btn-yellow-177{
    width: 1.77rem;
    height: .66rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/btn_yellow_177.png");
}
.btn-yellow-177 .text{
    margin: 0 auto;
    width: fit-content;
    -webkit-text-stroke: .03rem #FDFF4A;
    font-size: .32rem;
}
.btn-yellow-177 .text::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    background: linear-gradient(#CF0602,#FB4101);
    background-clip: text;
    color: transparent;
    -webkit-text-stroke:0;
}
.btn-yellow-177.grey{
    filter: grayscale(1);
}
.btn-yellow-337{
    width: 3.37rem;
    height: 1.03rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/btn_yellow_337.png");
}
.btn-yellow-337 .text{
    margin: 0 auto;
    width: fit-content;
    -webkit-text-stroke: .03rem #FDFF4A;
    font-size: .4rem;
}
.btn-yellow-337 .text::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    background: linear-gradient(#CF0602,#FB4101);
    background-clip: text;
    color: transparent;
    -webkit-text-stroke:0;
}

.thickdiv {
    position: absolute;
    touch-action: unset;
}

.date {
    margin: 4rem auto 0;
    padding: .02rem .3rem;
    width: fit-content;
    font-size: .28rem;
    color: #faffc4;
    background: linear-gradient(to right, transparent 0%, rgba(73, 165, 112, .7) 30%, rgba(73, 165, 112, .7) 70%, transparent 100%);
}


.date .text::before {
    -webkit-text-stroke: .06rem #488313;
}


.tabList {
    margin-top: 1.6rem;
    gap: .05rem;
}

.tabList li {
    padding-top: .1rem;
    padding-left: .3rem;
    width: 2.33rem;
    height: 1.24rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/bg_nav_01.png);
    line-height: 1;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
}

.tabList li.active {
    width: 2.33rem;
    height: 1.24rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/bg_nav_02.png);
}

.tabList li .tabList_title {
    margin-bottom: .05rem;
    font-size: .41rem;
    color: transparent;
    -webkit-text-stroke: .04rem #0A8223;
}

.tabList li.active .tabList_title {
    -webkit-text-stroke: .04rem #F1F34E;
}

.tabList li .tabList_title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    -webkit-text-stroke: 0;
    color: #DDFEE9;
}

.tabList li.active .tabList_title::after {
    background: linear-gradient(#B43C00, #F86E01);
    background-clip: text;
    color: transparent;
}

.tabList li .tabList_text {
    margin-bottom: .05rem;
    font-size: .2rem;
    color: transparent;
    -webkit-text-stroke: .04rem #0A8223;
}

.tabList li.active .tabList_text {
    -webkit-text-stroke: .04rem #F1F34E;
}

.tabList li .tabList_text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    -webkit-text-stroke: 0;
    color: #DEFFEA;
}

.tabList li.active .tabList_text::after {
    color: #D15D24;
}

.activity-content {
    margin: .6rem auto;
}

.item-title {
    text-align: center;
}

.item-title img {
    height: .73rem;
}

.item-synthesis .item-content {
    margin-top: .05rem;
    padding-top: .1rem;
    width: 7.5rem;
    height: 18.77rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/item_01.png");
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
}

.tips-synthesis {
    margin: 0 auto;
    padding: .15rem 0;
    width: 7.15rem;
    background: -webkit-linear-gradient(to right, transparent 0%, rgba(24, 88, 100, .4) 30%, rgba(24, 88, 100, .4) 70%, transparent 100%);
    background: linear-gradient(to right, transparent 0%, rgba(24, 88, 100, .4) 30%, rgba(24, 88, 100, .4) 70%, transparent 100%);
    font-family: 'ruizi';
    z-index: 2;
}

.tips-synthesis .text {
    -webkit-text-stroke: .02rem #206141;
    color: transparent;
}

.tips-synthesis .text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #E0FFDB;
    -webkit-text-stroke: 0;
}

.tips-synthesis .text.yellow::after {
    color: #FEFF81;
}

.role-list {
    margin-top: -.1rem;
    height: 6.12rem;
}

.role-list .con-left,
.role-list .con-right {
    margin: 0 -.1rem;
    width: 50%;
    height: 100%;
}

.role-list img[class*="role-"] {
    display: block;
}

.role-list .con-left .role-01 {
    width: 3.54rem;
    height: 5.31rem;

}

.role-list .role-02 {
    width: 3.54rem;
    height: 5.31rem;
}

.role-list .role-name {
    bottom: .45rem;
    left: 50%;
    padding-top: .02rem;
    width: 2.39rem;
    height: .59rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_name.png");
    font-family: 'ruizi';
    font-size: .36rem;
    -webkit-text-stroke: .03rem #004E2C;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    box-sizing: border-box;
}

.role-list .role-name::after {
    content: attr(data-text);
    position: absolute;
    background: linear-gradient(#FFF38C, #FFFEF2);
    background-clip: text;
    -webkit-text-stroke: 0;
    color: transparent;
}

.role-list .role-tips {
    bottom: .1rem;
    left: 50%;
    width: 3.8rem;
    font-size: .24rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.role-list .role-tips .text {
    -webkit-text-stroke: .05rem #004E2C;
}

.role-list .role-tips .text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #FFFDE6;
    -webkit-text-stroke: 0;
}

.role-list .role-tips .text.yellow::after {
    color: #FEFF81;
}

.obtain {
    margin-top: .5rem;
    padding: .1rem 0;
    background: -webkit-linear-gradient(to right, transparent 0%, rgba(24, 88, 100, .3) 30%, rgba(24, 88, 100, .3) 70%, transparent 100%);
    background: linear-gradient(to right, transparent 0%, rgba(24, 88, 100, .3) 30%, rgba(24, 88, 100, .3) 70%, transparent 100%);
}

.sub-title {
    margin: 0 auto;
    width: fit-content;
}

.sub-title::before,
.sub-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1.05rem;
    height: .09rem;
    background: url("//png.pookcdn.net/new_net/lydr/activity5/title_after.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.sub-title::before {
    left: -1.2rem;
}

.sub-title::after {
    right: -1.2rem;
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

.sub-title .text {
    -webkit-text-stroke: .05rem #004E2C;
    font-size: .36rem;
}

.sub-title .text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    background: linear-gradient(#FFF38C, #FFFEF2);
    background-clip: text;
    -webkit-text-stroke: 0;
    color: transparent;
}

.prop-list {
    margin: .05rem auto .4rem;
    gap: .5rem;
}

.prop-list_list {
    width: 1.49rem;
    height: 1.49rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_prop.png");
}

.prop-list_list .ico-award {
    display: block;
    width: 1.49rem;
    height: 1.49rem;
    background-repeat: no-repeat;
    background-position: center;
}

.prop-list_list .ico-01 {
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico/ico_01.png");
    background-size: 1.19rem 1.07rem;
}

.prop-list_list .ico-02 {
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico/ico_02.png");
    background-size: 1.01rem 1.07rem;
}

.prop-list_list .ico-03 {
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico/ico_03.png");
    background-size: 1.26rem 1.11rem;
}

.prop-list_list .ico-04 {
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico/ico_04.png");
    background-size: 1.26rem 1.1rem;
}

.prop-list_list .ico-05 {
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico/ico_05.png");
    background-size: 1.25rem 1.1rem;
}

.prop-list_list .ico-06 {
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico/ico_06.png");
    background-size: 1.26rem 1.11rem;
}

.prop-list_list .prop-num,
.prop-img .prop-num{
    bottom: 0;
    right: .1rem;
    font-size: .28rem;
    -webkit-text-stroke: .03rem #000;
}
.prop-img .prop-num{
    right: .05rem;
    font-size: .2rem;
    bottom: -.05rem;
}

.prop-list_list .prop-num::after,
.prop-img .prop-num::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #fff;
    -webkit-text-stroke: 0;
}

.prop-list_list .prop-name {
    bottom: -.4rem;
    left: 50%;
    width: fit-content;
    font-size: .28rem;
    -webkit-text-stroke: .03rem #003E24;
    text-align: center;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.prop-list_list .prop-name::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #fff;
    -webkit-text-stroke: 0;
}

.item-synthesis .synthesis-tips {
    margin: 6.5rem auto 0;
    width: fit-content;
    font-family: "ruizi";
    font-size: .3rem;
    -webkit-text-stroke: .05rem #235817;
}

.item-synthesis .synthesis-tips::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #FEFF81;
    -webkit-text-stroke: 0;
}

.prop-btn-list {
    gap: .4rem;
}

.item-synthesis .prop-btn-list {
    margin-top: .4rem;
}

.prop-btn-list .btn-yellow {
    width: 2.95rem;
    height: .91rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/btn_yellow_295.png);
}

.prop-btn-list .btn-yellow .text {
    font-size: .36rem;
    color: transparent;
    -webkit-text-stroke: .05rem #FDFF4A;
}

.prop-btn-list .btn-yellow .text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    background: linear-gradient(#CE0402, #FB4101);
    background-clip: text;
    -webkit-text-stroke: 0;
}

.item-shop {
    margin-top: .5rem;
}

.item-shop .item-content {
    padding: .2rem 0;
    margin: .05rem auto 0;
    width: 7.21rem;
    height: 5.72rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/item_02.png);
    box-sizing: border-box;
}

.item-shop .prop-list {
    gap: .2rem;
}

.item-shop .shop-tips {
    margin: 1.7rem auto 0;
    width: fit-content;
    text-align: center;
    color: transparent;
    font-size: .28rem;
    -webkit-text-stroke: .03rem #003E24;
    font-family: 'CLOUDYUANCU';
}

.item-shop .shop-tips::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #F9FFCB;
    -webkit-text-stroke: 0;
}

.item-service {
    margin-top: .7rem;
}

.item-service .service-tips {
    margin: .2rem auto;
    width: 6.19rem;
    height: .64rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/bg_tips.png);
    color: #e1ffce;
    font-size: .36rem;
}

.item-service .service-tips .yellow {
    color: #fdff4a;
}

.btn-green {
    margin: 0 auto;
    width: 3.37rem;
    height: 1.03rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/btn_green.png);
    font-size: .4rem;
}
.btn-green.grey {
    filter: grayscale(1);
}

.btn-green .text {
    width: fit-content;
    -webkit-text-stroke: .03rem #D2FF9C;
}

.btn-green .text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    -webkit-text-stroke: 0;
    background: linear-gradient(#005B0F, #147E00);
    background-clip: text;
    color: transparent;
}

.voyage-tips {
    margin: .2rem auto;
    font-size: .28rem;
    text-align: center;
    line-height: 1;
}

.voyage-tips span {
    margin: 0 auto;
    width: fit-content;
    -webkit-text-stroke: .03rem #003E24;
}

.voyage-tips span::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #E0FFDB;
    -webkit-text-stroke: 0;
}

.item-voyage .item-content {
    margin: 0 auto;
    width: 7.21rem;
    height: 18.18rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/item_03.png");
    overflow: hidden;
}

.item-voyage .sub-tips {
    margin: .2rem auto;
    width: 80%;
    height: .55rem;
    background: -webkit-linear-gradient(to right, transparent 0%, rgba(0, 115, 87, .5) 30%, rgba(0, 115, 87, .5) 70%, transparent 100%);
    background: linear-gradient(to right, transparent 0%, rgba(0, 115, 87, .5) 30%, rgba(0, 115, 87, .5) 70%, transparent 100%);
}

.item-voyage .sub-tips .text {
    font-size: .28rem;
    -webkit-text-stroke: .04rem #0A5337;
}

.item-voyage .sub-tips .text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #E0FFDB;
    -webkit-text-stroke: 0;
}

.item-voyage .voyage-progress {
    margin: 3.4rem auto 0;
    width: 6.6rem;
    height: .25rem;
    background: #004E3B;
    -webkit-border-radius: .3rem;
    border-radius: .3rem;
}
.item-voyage .voyage-progress .voyage-progress_bar{
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(#FFFF22 10%,#FBE489 30%,#F5BA1B 60%,#FEEF2E 100%);
    background: linear-gradient(#FFFF22 10%,#FBE489 30%,#F5BA1B 60%,#FEEF2E 100%);
    -webkit-border-radius: .3rem;
    border-radius: .3rem;
    border: .02rem #004E3B solid;;
}
.item-voyage .voyage-progress .ico-boat{
    top: 0;
    left: -.2rem;
    width: 1.22rem;
    height: 1.01rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/ico_progress.png");
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.item-voyage .voyage-progress .num-progress{
    top: 50%;
    padding-top: .03rem;
    width: .66rem;
    height: .35rem;
    background: #004E3B;
    border: .02rem #00674E solid;
    box-sizing: border-box;
    -webkit-border-radius: .05rem;
    border-radius: .05rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.item-voyage .voyage-progress .num-progress.active{
    background: -webkit-linear-gradient(#FFFF22 10%,#FBE489 30%,#F5BA1B 60%,#FEEF2E 100%);
    background: linear-gradient(#FFFF22 10%,#FBE489 30%,#F5BA1B 60%,#FEEF2E 100%);
}
.item-voyage .voyage-progress .num-progress .text{
    -webkit-text-stroke: .03rem #003E24;
}
.item-voyage .voyage-progress .num-progress .text::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    -webkit-text-stroke: 0;
    color: #F6FFF0;
}
.item-voyage .voyage-progress .text-progress{
    top: -.3rem;
    right: -.1rem;
    font-size: .16rem;
    -webkit-text-stroke: .04rem #004e3b;
}
.item-voyage .voyage-progress .text-progress::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #fff;
    -webkit-text-stroke:0;
}
.item-voyage .item-task{
    margin-top: .5rem;
    max-height: 12.5rem;
    overflow-y: auto;
}
.item-voyage .item-task-info{
    margin: 0 auto .2rem;
    width: 6.88rem;
    height: 2.39rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_list_progress.png");
}
.item-voyage .task-title{
    margin-left: .2rem;
    width: fit-content;
    height: .65rem;
    font-size: .3rem;
    -webkit-text-stroke: .03rem #004E2C;
    box-sizing: border-box;
}
.item-voyage .task-title::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    -webkit-text-stroke: 0;
    background: linear-gradient(#FFF391,#FFFEF7);
    background-clip: text;
    color: transparent;
}
.item-voyage .item-task-content{
    margin: 0 .2rem;
    gap: .1rem;
}
.item-voyage .award-list{
    margin-top: .1rem;
    gap: .1rem;
}
.item-voyage .item-award{
    width: 1.49rem;
    height: 1.49rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_prop.png");
}
.item-voyage .item-award img{
    width: 1.12rem;
}
.item-voyage .item-award .award-num{
    bottom: 0rem;
    right: .1rem;
    font-size: .28rem;
    -webkit-text-stroke: .04rem #100E3D;
}
.item-voyage .item-award .award-num::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #fff;
    -webkit-text-stroke: 0;
}
.item-voyage .btn-yellow-177{
    flex-shrink: 0;
}
.item-heroic .item-rank{
    margin: .1rem auto;
    width: 7.21rem;
    height: 14.05rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/item_04.png);
    overflow: hidden;
}
.item-heroic .item-rank-02{
    height: 17.13rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/item_05.png);
}
.item-heroic .tips-rank{
    margin-top: .1rem;
    padding: .1rem 0;
    text-align: center;
    font-size: .28rem;
    line-height: 1.2;
}
.item-heroic .tips-rank .text{
    -webkit-text-stroke: .04rem #206141;
}
.item-heroic .rank-countdown-row {
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: fit-content;
    gap: .12rem;
}
.item-heroic .btn-rank-refresh {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #1a5c38;
    cursor: pointer;
    vertical-align: middle;
}
.item-heroic .btn-rank-refresh .ico-rank-refresh {
    display: block;
    width: .32rem;
    height: .32rem;
    pointer-events: none;
}
.item-heroic .btn-rank-refresh.refreshing {
    -webkit-animation: rank-refresh-spin .8s linear infinite;
    animation: rank-refresh-spin .8s linear infinite;
}
@-webkit-keyframes rank-refresh-spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rank-refresh-spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.item-heroic .award-list-info{
    margin: 0 -.1rem .1rem;
    width: 2.51rem;
    height: 3.18rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/bg_list.png);
}
.item-heroic .award-list-info:nth-of-type(1),
.item-heroic .award-list-info:nth-of-type(3){
    margin-top: .5rem;
}
.item-heroic .award-list-info .award-list-info_img{
    margin: .2rem auto 0;
    width: 1.49rem;
    height: 1.49rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/bg_prop.png);
}
.item-heroic .award-list-info .award-list-info_img img{
    width: 80%;
    object-fit: cover;
}
.item-heroic .award-list-info .award-list-info_name{
    margin:.33rem auto 0;
    width: fit-content;
    font-size: .18rem;
    color: #a35010;
}
.item-heroic .award-list-info .physical_items_name{
    margin:.23rem auto 0;
    width: fit-content;
    font-size: .28rem;
    color: #a35010;
}
.item-heroic .award-list-info .award-list-info_rank{
    position: relative;
    margin:.05rem auto 0;
    width: fit-content;
    height: .55rem;
    font-size: .3rem;
    -webkit-text-stroke: .04rem #E10000;
}
.item-heroic .award-list-info .award-list-info_rank::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    background: linear-gradient(#FFE955,#FFFFF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke:0;
}

.item-heroic .rank-ico{
    width: 1.04rem;
}
.item-heroic .ico-rank-01{
    width: 1.04rem;
    height: .92rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/ico_rank_01.png);
}
.item-heroic .ico-rank-02{
    width: .91rem;
    height: .92rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/ico_rank_02.png);
}
.item-heroic .ico-rank-03{
    width: .91rem;
    height: .88rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/ico_rank_03.png);
}
.item-heroic .ico-rank-text{
    padding-top: .03rem;
    width: .52rem;
    height: .52rem;
    background: rgba(131, 93, 45, .3);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    box-sizing: border-box;
}
.item-heroic .ico-rank-text .text{
    font-size: .41rem;
    -webkit-text-stroke: .04rem #7C3A1C;
}
.item-heroic .ico-rank-text .text::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    background: -webkit-linear-gradient(#FFFEFB,#FFE64F);
    background: linear-gradient(#FFFEFB,#FFE64F);
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0;
}
.item-heroic .rank-list{
    margin: .2rem auto;
    width: 6.93rem;
    height: 6.4rem;
    overflow-y: auto;
}
.item-heroic .item-rank-02 .rank-list{
    height: 7.5rem;
}
.item-heroic .rank-list-info{
    margin:0 auto .1rem;
    padding: 0 .2rem;
    width: 6.93rem;
    height: 1.25rem;
    box-sizing: border-box;
}
.item-heroic .rank-list-01{
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_rank_01.png");
}
.item-heroic .rank-list-02{
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_rank_02.png");
}
.item-heroic .rank-list-03{
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_rank_03.png");
}
.item-heroic .rank-list-04{
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_rank_04.png");
}
.item-heroic .rank-list-self{
    width: 7.03rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_rank_self.png");
}
.item-heroic .user-head{
    margin: 0 .2rem;
    width: 1.23rem;
    height: 1.23rem;
    overflow: hidden;
}
.item-heroic .rank-list-01 .user-head{
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_head_01.png");
}
.item-heroic .rank-list-02 .user-head{
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_head_02.png");
}
.item-heroic .rank-list-03 .user-head{
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_head_03.png");
}
.item-heroic .rank-list-04 .user-head{
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_head_04.png");
}
.item-heroic .rank-list-info .user-id{
    position: relative;
    margin-right: .1rem;
    width: 1.5rem;
    font-size: .26rem;
    color:#003E24;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.item-heroic .rank-list-info .user-name{
    width: 2.3rem;
    font-size: .26rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.item-heroic .rank-list-01 .user-name{
    color: #c44314;
}
.item-heroic .rank-list-02 .user-name{
    color: #0069A0;
}
.item-heroic .rank-list-03 .user-name{
    color: #017801;
}
.item-heroic .rank-list-04 .user-name{
    color: #512b0a;
}
.item-heroic .rank-list-self .user-name{
    color: #8c5d01;
}
.item-heroic .rank-title-02{
    margin-top: .4rem;
}

.item-heroic .user-head img{
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
}
.item-heroic .item-service{
    margin-top: 0;
}

.pup .pup-title {
    margin: .2rem auto 0;
    width: fit-content;
    font-size: .43rem;
    color: #1F9713;
    font-family: 'CLOUDYUANCU';
    text-align: center;
    -webkit-text-stroke: .03rem #EFFFDC;
}

.pup .pup-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    background: -webkit-linear-gradient(#FEFFD3, #FFF447);
    background: linear-gradient(#FEFFD3, #FFF447);
    background: -webkit-linear-gradient(#015972, #108E45);
    background: linear-gradient(#015972, #108E45);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0;
}

.btn-close {
    top: -.5rem;
    right: -.1rem;
    width: .47rem;
    height: .46rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/btn_close.png);
    z-index: 2;
    cursor: pointer;
}

.pup-ruler .btn-close {

}

.pup-ruler .pup-title {
    top: -.5rem;
    left: 50%;
    width: 4.34rem;
    height: 0.73rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/bg_ruler_title.png);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.pup-ruler {
    top: 2rem;
    width: 7.21rem;
    height: 14.87rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/bg_pup_ruler.png);
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.pup-details {
    width: 4.45rem;
    height: 7.89rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_ruler_lottery.png);
}


.pup-receive .pup-title {
    margin-bottom: .2rem;
}

.pup-receive .prop-list {
    height: 3.8rem;
    overflow: auto;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
}

.pup-receive .prop-list.prop-list-single {
    height: 2.5rem;
}

.pup-receive .receive-img {
    margin: .1rem auto 0;
    text-align: center;
    width: 1.1rem;
    height: 1.1rem;
    background-color: #0F8B47;
}

.pup-receive .receive-img img {
    width: 90%;
    height: 90%;
    object-fit: cover;
}

.pup-receive .receive-name {
    margin: 0 auto;
    width: fit-content;
    text-align: center;
    font-size: .25rem;
   -webkit-text-stroke: .04rem #2B6C4B;
}
.pup-receive .receive-name::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #fff;
    -webkit-text-stroke: 0;
}

.address {
    bottom: -.4rem;
    text-align: center;
    width: 100%;
    color: #fff;
    text-decoration: underline;
    font-size: .24rem;
}


.pup-code .content {
    margin: .2rem auto .2rem;
    width: 80%;
    text-align: center;
    font-size: .18rem;
    color: #fff;
    line-height: 1.3;
    word-break: break-word;
    font-size: .26rem;
    -webkit-flex-flow: column;
    flex-flow: column;
}

.pup-congratulations {
    top: 45%;
    width: 7.5rem;
    height: 11.7rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_congratulations.png);
}

.pup-congratulations .btn-close {
    top: 2.2rem;
    right: .5rem;
}

.pup-encourage {
    width: 7.31rem;
    height: 10.91rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_encourage.png);
}

.pup-encourage .btn-close {
    top: 1.5rem;
    right: .5rem;
}


.pup-common-tips {
    width: 5.36rem;
    height: 3.8rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity_1/0116/bg_pup_common.png");
}

.pup-common-tips .content {
    margin-top: .5rem;
    font-size: .24rem;
    color: #95716a;
}

.pup-common-tips .content .text {
    height: 1.8rem;
}

.pup-common-tips .btn-list {
    gap: .3rem;
    -webkit-transform: scale(.9);
    transform: scale(.9);
}

.btn-cancel {
    width: 2.2rem;
    height: .74rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity_1/btn_cancel.png);
}


.pup-ruler .ruler-content,
.pup-details .details-content {
    margin: .8rem auto 0;
    width: 100%;
    padding: 0 .4rem;
    font-size: .24rem;
    color: #225E31;
    word-break: break-word;
    overflow: hidden;
    height: 13.4rem;
    overflow-y: auto;
    box-sizing: border-box;
}

.pup-tips {
    width: 7.4rem;
    height: .8rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity_1/bg_tip.png");
    font-size: .24rem;
    color: #fff;
    text-align: center;
    z-index: 120
}

.hint {
    position: fixed;
    background: rgba(0, 0, 0, 0) url(//png.pookcdn.net/new_net/bydrqp/pup_hint.png) no-repeat scroll 0 0 / 100% 100%;
    height: 5.4rem;
    right: .51rem;
    top: 0;
    width: 6.03rem;
    z-index: 120;
}

.pup-code .content .tips-text{
    margin: .3rem auto;
    padding: .1rem 0;
    width: 100%;
    background: linear-gradient(to right,transparent 0%,rgba(59,102,70,.5) 20%,rgba(59,102,70,.5) 80%,transparent 100%);
}
.pup-code .content input {
    width: 1.7rem;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
}

.pup-code .content button {
    color: #E56F3A;
    text-decoration: underline;
}

.pup-code .content .code img {
    width: 2.05rem;
}

.pup-login {
    width: 6.37rem;
    height: 4.66rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/bg_pup_466.png");
}

.pup-login .btn-close {
    top: .35rem;
    right: .35rem;
    width: .34rem;
    height: .35rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/btn_close.png");
}

.pup-login .login-tab {
    top: -.74rem;
    left: 50%;
    gap: .1rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.pup-login .login-tab [class*="item-tab"] {
    width: 2.64rem;
    height: .93rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/login_tab.png");
    font-size: .28rem;
    color: #ffd274;
    line-height: .6rem;
    font-family: 'CLOUDYUANCU';
}

.pup-login .login-tab [class*="item-tab"].active {
    position: relative;
    top: .01rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/login_tab_active.png");
}

.pup-login .login-tab [class*="item-tab"] span {
    display: block;
    margin: 0 auto;
    position: relative;
    top: -.05rem;
    height: .33rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.pup-login .login-tab [class*="item-tab"].active span {
    top: -.02rem;
}

.pup-login .login-tab .item-tab-01 span {
    width: 1.83rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_01_01.png");
}

.pup-login .login-tab .item-tab-01.active span {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_01_02.png");
}

.pup-login .login-tab .item-tab-02 span {
    width: 1.53rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_02_01.png");
}

.pup-login .login-tab .item-tab-02.active span {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_02_02.png");
}

.pup-login .login-logo {
    margin-top: .4rem;
    text-align: center;
}

.pup-login .login-logo img {
    width: 2.79rem;
}

.pup-login .item-input {
    margin-bottom: .15rem;
    font-size: .28rem;
    color: #a1674d;
}

.pup-login .con-left {
    width: 1.4rem;
}

.pup-login .con-right {
    padding: 0 .1rem;
    width: 3.14rem;
    background: #D1BEA7;
    height: .46rem;
    color: #FFF6D9;
    line-height: .4rem;
    -webkit-border-radius: .1rem;
    border-radius: .1rem;
    overflow: hidden;
    box-sizing: border-box;
}

.pup-login .con-right input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'CLOUDYUANCU';
    text-align: center;
}

.pup-login .phone-login {
    margin-top: .6rem;
}

.pup-login .phone-login .con-right {
    width: 3.76rem;
}

.pup-login .phone-login input {
    text-align: left;
}

.pup-login .phone-login .con-right span {
    position: relative;
    padding-right: .1rem;
    margin-right: .1rem;
}

.pup-login .phone-login .con-right span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: .02rem;
    height: .25rem;
    background: #FFF6D9;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.pup-login .phone-login .con-right button {
    width: 1.9rem;
    color: #e44936;
    font-size: .2rem;
    text-align: center;
}

.pup-login .tips-read {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    font-size: .18rem;
    color: #95716a;
}

.pup-login .tips-read a {
    color: #95716a;
    text-decoration: underline;
}

.pup-login .tips-read .ico-check {
    width: .23rem;
    height: .23rem;
    background: #C3B19A;
    border: none;
    margin-right: .1rem;
}

.pup-login .tips-read .ico-check label {
    position: absolute;
    top: -.07rem;
    left: -.05rem;
    width: .38rem;
    height: .3rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.btn-register {
    bottom: .9rem;
    right: .8rem;
    font-size: .24rem;
    color: #95716a;
    text-decoration: underline;
}

.pup-login .account-tab button {
    margin: .2rem .2rem;
    width: 2.06rem;
    height: .59rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pup-login .account-tab .item-tab-01 {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_01_01.png");
}

.pup-login .account-tab .item-tab-02 {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_02_01.png");
}

.pup-login .account-tab .item-tab-01.active {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_01_02.png");
}

.pup-login .account-tab .item-tab-02.active {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_02_02.png");
}

.btn-login {
    margin: .2rem auto;
    width: 2.18rem;
    height: .72rem;
    background-image: url(//png.pookcdn.net/new_net/bydrqp/activity_2/btn_login.png);
}

.pup-record {
    width: 4.45rem;
    height: 7.89rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_record.png);
}

.pup-record .record-content {
    margin: 1.6rem auto 0;
    width: 4.13rem;
    text-align: center;
    font-size: .2rem;
    color: #e1e1e1;
}

.pup-record .record-content .con-01 {
    width: 2.17rem;
}

.pup-record .record-content .con-02 {
    width: .81rem;
}

.pup-record .record-content .con-03 {
    width: 1.14rem;
}

.pup-record .record-content .record-title {
    margin-bottom: .1rem;
}

.pup-record .record-content .record-list {
    height: 5.2rem;
    font-size: .2rem;
    color: #fff;
    overflow: hidden;
}

.pup-record .record-content .record-list li {
    display: -webkit-flex;
    display: flex;
    margin-bottom: .1rem;
    padding: .05rem;
    box-sizing: border-box;
    background: rgba(195, 42, 0, .58);
}

.pup-record .record-content .record-list li .con-01 {
    text-align: left;
    line-height: 1.2;
}

.pup-record .record-content .record-list li .con-02 {
    font-size: .46rem;
    line-height: 1;
}

.pup-common {
    width: 5.92rem;
    height: 6.04rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_pup_common.png");
    font-family: "fangzheng";
}

.pup-common .item-text {
    margin: 0 auto;
    width: 70%;
    height: 2rem;
    font-size: .28rem;
    color: #b28243;
    word-break: break-word;
}

.pup-common .item-text span {
    color: #ff0202;
}

.pup-receive .btn-yellow-337{
    margin: 1.5rem auto 0;
}
.pup-exchange .btn-yellow-337{
    margin: 1rem auto 0;
}
.pup-exchange .receive-img{
    width: 1.72rem;
    height: 1.71rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_prop_yellow.png");
    background-color: transparent;
}

.pup-get .pup-title {
    margin-top: 1.2rem;
    margin-bottom: .3rem;
}

.pup-switch .head-img {
    display: block;
    margin: .1rem auto;
    width: 1.13rem;
    height: 1.13rem;
}

.pup-switch .head-img img {
    width: 100%;
    height: 100%;
}

.pup-switch .user-id {
    font-size: .28rem;
    color: #b28243;
    text-align: center;
}

.pup-switch .user-name {
    margin: 0 auto;
    width: 75%;
    font-family: "fangzheng";
    text-align: center;
    font-size: .43rem;
    background: -webkit-linear-gradient(#14830E, #85AC19);
    background: linear-gradient(#14830E, #85AC19);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pup-switch .btn-yellow-337 {
    position: absolute;
    left: 50%;
    bottom: .45rem;
    margin: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    cursor: pointer;
}

.pup-shop {
    top: 2rem;
    width: 7.21rem;
    height: 14.87rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_pup_shop.png");
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.pup-shop .btn-close {
    top: -.6rem;
    right: 0;
}
.pup-shop .sub-title{
    margin-top: .1rem;
}

.pup-shop .shop-info {
    margin-top: -.3rem;
    font-size: .38rem;
    text-align: center;
    color: #b28243;
}

.pup-shop .shop-info .info-num {
    font-size: .5rem;
    background: -webkit-linear-gradient(#14830E, #85AC19);
    background: linear-gradient(#14830E, #85AC19);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.pup-shop .shop-info .info-num span {
    margin-right: .1rem;
    font-size: .7rem;
}
.pup-shop .prop-list{
    gap: .1rem;
}

.pup-shop .info-tips {
    font-size: .22rem;
}

.pup-shop .award-list {
    margin: .7rem auto 0;
    width: 96%;
    height: 11rem;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    overflow: auto;
    gap: .05rem;
}

.pup-shop .card {
    width: 2.26rem;
    height: 3.67rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity5/bg_pup_shop_item.png");
    font-size: .24rem;
    color: #8f6228;
    -webkit-flex-flow: column;
    flex-flow: column;
}
.pup-shop .card .awadr-name{
    margin: .2rem auto 0;
    width: fit-content;
    text-align: center;
    font-size: .25rem;
    -webkit-text-stroke: .03rem #417550;
}
.pup-shop .card .awadr-name::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    -webkit-text-stroke: 0;
    color: #E0FFDB;
}
.pup-shop .card .num {
    display: block;
    margin-bottom: .1rem;
    color: #ff3600;
    text-align: center;
    font-size: .25rem;
}

.pup-shop .card .prop-img {
    margin: 0 auto;
    width: .94rem;
    height: .94rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity5/bg_prop_yellow_s.png);
}

.pup-shop .card .prop-img img {
    width: 90%;
    height: 90%;
    object-fit: fill;
}
.pup-shop .card .prop-price {
    text-align: center;
}
.pup-shop .card .prop-price .text,
.pup-shop .card .prop-name {
    margin: .05rem auto 0;
    width: fit-content;
    text-align: center;
    font-size: .25rem;
    -webkit-text-stroke: .03rem #417550;
}
.pup-shop .card .prop-price .text::after,
.pup-shop .card .prop-name::after{
    content: attr(data-text);
    position: absolute;
    left: 0;
    -webkit-text-stroke: 0;
    color: #E0FFDB;
}

.pup-shop .card .prop-num span {
    color: #ff3600;
}
.pup-shop .btn-yellow-177{
    margin: 0 auto;
}

#getPointsDiv .pup-title {
    margin: 1.2rem auto .3rem;
}

#getPointsDiv .item-text {
    width: 72%;
}

#propList .prop-item {
    width: 50%;
}
@media only screen and (max-height: 900px) {
    .pup-shop{
        -webkit-transform: translate(-50%, 0%)  scale(.95);
        transform: translate(-50%, 0%) scale(.95);
        transform-origin: top center;
    }

}
@media only screen and (max-height: 800px) {
    .pup-shop{
        -webkit-transform: translate(-50%, 0%)  scale(.75);
        transform: translate(-50%, 0%) scale(.75);
        transform-origin: top center;
    }

}
@media only screen and (max-width: 360px) {

    .pup-common,
    .pup-login {
        top: 5rem;
        -webkit-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
    }
    .pup-shop{
        -webkit-transform: translate(-50%, 0%)  scale(.85);
        transform: translate(-50%, 0%) scale(.85);
    }

}

@media only screen and (max-width: 780px) and (orientation: landscape) {}

@media only screen and (min-width: 1024px) {
    html {
        overflow: hidden;
    }

    body {
        width: 100%;
        height: 100vh;
        background: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pc.jpg) no-repeat;
        background-size: cover;
        background-position: top center;
        overflow: auto;
    }

    .float-top {
        left: calc(50% - .07rem);
    }
}