:root {
    --color-yellow: #efe9a6;
    --color-green: #8b977e;
    --color-black: #060606;
    --color-white: #fff;
    --color-light: #f0e5c8;
    --color-yellow2: #d3b975;
    --color-yellow3: #ffe08a;
    --color-gray: #848484;
    --color-dark-yellow: rgba(45, 20, 9, .77);
}

:root {
    --font-default: Verdana, Arial, Helvetica, sans-serif;
    --font-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
    --font-styled: "FontinRegular", Verdana, Arial, Helvetica, sans-serif;
    --font-styled-bold: "FontinBold", Verdana, Arial, Helvetica, sans-serif;
    --font-styled-caps: "FontinSmallCaps", Verdana, Arial, Helvetica, sans-serif;
    --font-styled-italic: "FontinItalic", Verdana, Arial, Helvetica, sans-serif;
    --font-titles: "Cinzel", Verdana, Arial, Helvetica, sans-serif;
    --font-family-optimus-semibold: "OptimusPrincepsSemiBold", "Cinzel", "Noto Sans JP", Verdana, Arial, Helvetica, sans-serif;
    --font-handwriting: "Quikhand", Verdana, Arial, Helvetica, sans-serif;
    --font-test: "Lora", serif;
    --font-size-sm: .8rem;
    --font-size-default: .9rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.4rem;
    --font-size-2xl: 2.8rem;
    --leading-normal: 1.2;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-width: 3.50rem;
    background: url("//game.gtimg.cn/images/poe2/mysterybox/bg.webp") no-repeat fixed center center;
    background-size: cover;
}

body:not(.phone) .download::before {
    content: "下载游戏";
    /*background: linear-gradient(to bottom, #7B7361, #BAA370 72%);*/
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    color: #BAA370;
    font-size: 0.24rem;
    font-family: "HYXuanSong65", serif;
    line-height: .3rem;
    transition: 0.3s all;
}

body:not(.phone) .download {
    position: fixed;
    top: 41px;
    left: 2rem;
    background: url("//game.gtimg.cn/images/poe2/download.png") center/cover no-repeat;
    width: 6.44rem;
    height: 1.88rem;
    text-align: center;
    z-index: 12;
}

body:not(.phone) .l-adron {
    position: absolute;
    left: 0;
    top: 0;
    background: url("//game.gtimg.cn/images/poe2/adorn.png") center/cover no-repeat;
    width: 6.52rem;
    height: 1.58rem;
    z-index: 1;
    pointer-events: none;
}

body:not(.phone) .r-adron {
    position: absolute;
    right: 0;
    top: 0;
    background: url("//game.gtimg.cn/images/poe2/adorn2.png") center/cover no-repeat;
    width: 10.28rem;
    height: 1.58rem;
    z-index: 1;
    pointer-events: none;
}

body, html {
    width: 100vw;
    height: 100vh;
    overflow-y: hidden;
}

video {
    width: 100%;
    height: 100%;
}

.ost_box {
    width: 100%;
    color: #333;
    position: fixed;
    left: 0;
    top: 0 !important;
    font-size: .14rem;
    z-index: 8000;
    background: #fff;
    border-bottom: .02rem solid #f5f5f5;
    font-family: "Microsoft YaHei", Tahoma, "simsun", sans-serif;
}

.wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*background: url("//game.gtimg.cn/images/poe2/bg.png") center/cover no-repeat;*/
}

body:not(.phone) .wrap {
    width: 19.2rem;
}

.main {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
}

body:not(.phone) .main {
    width: 19.2rem;
}

.part1 {
    width: 7.5rem;
    height: 100rem;
    background: url("//game.gtimg.cn/images/poe2/bg1.jpg") no-repeat top center/100%;
    margin: 0 auto;
}

body:not(.phone) .part1 {
    width: 12.0rem;
}

.pop {
    display: none;
    background: no-repeat 0/100%;
}

.btn_close {
    background-image: url("//game.gtimg.cn/images/poe2/mysterybox/pop-close.png");
    width: .48rem;
    height: .48rem;
    position: absolute;
    right: -0.1rem;
    top: 0.3rem;
}

.pop-alert {
    background-image: url("//game.gtimg.cn/images/poe2/mysterybox/pop.png");
    width: 5.19rem;
    height: 4.96rem;
    box-sizing: border-box;
    padding-top: 1.4rem;
}

.pop-alert-cont {
    width: 4.60rem;
    height: 2.2rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .2rem;
    color: #ffe08a;
    text-align: center;
}

.the-last-druids-box-hero {
    width: 100%;
    height: 8.4rem;
    padding-top: 2.7rem;
    line-height: 2;
    background: url("//game.gtimg.cn/images/poe2/mysterybox/head.jpg") no-repeat 0 0/100%;
}

.the-last-druids-box-hero__content {
    color: var(--color-gray);
    font-family: var(--font-styled), serif;
    margin: 0 auto;
    box-sizing: border-box;
    width: 12.09rem;
    padding: 1.54rem 10vw .93rem;
    text-align: center;
    min-width: 10.00rem;
    font-size: .14rem;
}

.poe2-announcement-title {
    background-image: url("//game.gtimg.cn/images/poe2/mysterybox/txt_head.png");
    width: 5rem;
    height: .93rem;
    margin: 0 auto;
    margin-bottom: .1rem;
}

.txt-green {
    color: var(--color-green);
}

.part {
    position: relative;
    box-sizing: border-box;
}

.part-goods {
    background: url("//game.gtimg.cn/images/poe2/mysterybox/points-bg.webp") no-repeat center center/cover;
    height: 5.5rem;
    padding-top: .6rem;
}

.part-goods::before, .part-goods::after {
    content: '';
    background: url("//game.gtimg.cn/images/poe2/mysterybox/divider_header_bot.webp") no-repeat center center/ auto 100%;
    height: .33rem;
    width: 100%;
    position: absolute;
    top: -.13rem;
    left: 0;
}

.part-goods::after {
    top: initial;
    bottom: 0;
}

.divider {
    background: url("//game.gtimg.cn/images/poe2/mysterybox/divider-decal.webp") no-repeat center center/auto 100%;
    width: 100%;
    height: .56rem;
    position: absolute;
    left: 0;
    bottom: -.36rem;
    transform: rotate(180deg);
}
.divider-sub{
    top: -.56rem;
    bottom: initial;
    transform: rotate(0deg);
}

.goods-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.goods-item {
    position: relative;
    background: url("//game.gtimg.cn/images/poe2/mysterybox/good_box.webp") no-repeat center center/cover;
    width: 2.64rem;
    height: 4.25rem;
    box-sizing: border-box;
    padding: .34rem .24rem .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 .08rem;
    cursor: pointer;
}

.goods-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: url("//game.gtimg.cn/images/poe2/mysterybox/good_box_hover.webp") no-repeat center/cover;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: .4s all;
}

.goods-item-img {
    position: relative;
    height: 3.14rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goods-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.goods-item-count {
    font-size: .34rem;
    position: absolute;
    right: .4rem;
    bottom: .6rem;
    color: var(--color-yellow);
    font-family: 'font1';
}

.goods-item-name {
    position: absolute;
    bottom: .86rem;
    width: 100%;
    height: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: .18rem;
    line-height: .4rem;
    color: var(--color-light);
}

.goods-item-price {
    width: 2.46rem;
    height: .63rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.goods-item-price::before {
    content: '';
    background: url("//game.gtimg.cn/images/poe2/mysterybox/btn_buy.webp") no-repeat center center/100%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .8;
    position: absolute;
    top: 0;
    left: 0;
}

.goods-item-price i {
    background: url("//game.gtimg.cn/images/poe2/mysterybox/icon_coin.png") no-repeat center center/100%;
    width: .29rem;
    height: .26rem;
    margin-right: .05rem;
    position: relative;

}

.goods-item-price span {
    font-size: .24rem;
    color: var(--color-yellow2);
    position: relative;
    font-family: 'font2';
    text-shadow: 0 .04rem .04rem var(--color-dark-yellow);
    transition: .4s all;
}

.goods-item:hover::after {
    opacity: 1;
}

.goods-item-price:hover::before {
    opacity: 1;
}

.goods-item-price:hover span {
    color: var(--color-yellow3);
}

.tit-video {
    background: url("//game.gtimg.cn/images/poe2/mysterybox/tit-video.png") no-repeat center center/100%;
    width: 6.61rem;
    height: .45rem;
    margin: 1.0rem auto;
    position: relative;
}

.tit-video::before, .tit-video::after {
    content: '';
    background: url("//game.gtimg.cn/images/poe2/mysterybox/title-line.webp") no-repeat center center/auto 100%;
    height: .15rem;
    width: 100%;
    position: absolute;
    left: 0;
    top: -.3rem;
}

.tit-video::after {
    transform: rotateY(180deg);
    top: initial;
    bottom: -.3rem;
}

.part-video {
    box-sizing: content-box;
    margin: -.2rem auto 2.2rem;
    overflow: hidden;
    padding: .4rem 0;
}

.video-box {
    margin: 0 auto;
    position: relative;
    background: #000;
    width: 14.0rem;
    aspect-ratio: 16/9;
}

.video-box iframe {
    width: 100%;
    height: 100%;
}

.video_frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translate(-50%);
    -o-border-image: url("//game.gtimg.cn/images/poe2/mysterybox/trailer-frame.webp");
    border-image: url("//game.gtimg.cn/images/poe2/mysterybox/trailer-frame.webp");
    border-image-slice: 110 290 570;
    border-image-width: 1.10rem 3.20rem 5.00rem;
    width: 100%;
    height: 100%;
    pointer-events: none;
    padding: 0.80rem 2.9rem;
    box-sizing: content-box;
}

.part_frame {
    background: #000000;
    width: 13.4rem;
    position: relative;
    margin: 0 auto 1.1rem;
    padding: .36rem 0 .3rem;
}

.part_frame_video {
    padding: 0 1.6rem;
}

.part_frame::before, .part_frame::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    left: 50%;
    transform: translate(-50%);
}

.part_frame::after {
    background-image: url("//game.gtimg.cn/images/poe2/mysterybox/frame-top-decal.webp");
    width: 2.48rem;
    height: .62rem;
    top: -.62rem;
}

.poe2-frame--bottomless::after {
    display: none;
}

.part_frame_border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    pointer-events: none;
    -o-border-image: url("//game.gtimg.cn/images/poe2/mysterybox/frame.webp");
    border-image: url("//game.gtimg.cn/images/poe2/mysterybox/frame.webp");
    border-image-slice: 100 fill;
    border-image-width: 1.00rem;
    border-image-outset: .22rem .12rem;
}

.items_video_box {
    -o-border-image: url(//game.gtimg.cn/images/poe2/mysterybox/item-thumb-bg.webp);
    border-image: url(//game.gtimg.cn/images/poe2/mysterybox/item-thumb-bg.webp);
    border-image-slice: 6 6 fill;
    border-image-width: .06rem .06rem;
    border-image-outset: .06rem .06rem;
    max-width: 100%;
}

.skins_list {
    margin: .4rem .3rem 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.skins_item {
    margin-bottom: .24rem;
    height: 1.3rem;
    flex: 1 0 calc(50% - .75rem);
    min-width: 3.00rem;
    display: flex;
    align-items: flex-start;
}

@media screen and (max-width: 800px) {
    .skins_list {
        margin: .8rem .6rem 0;
    }
    .skins_item {
        margin-bottom: .64rem;
    }
}

.skin_thumb {
    width: 1.3rem;
    height: 1.3rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .2rem;
}

.skin_thumb::before {
    content: "";
    pointer-events: none;
    -o-border-image: url(//game.gtimg.cn/images/poe2/mysterybox/prize_box.webp);
    border-image: url(//game.gtimg.cn/images/poe2/mysterybox/prize_box.webp);
    border-image-slice: 6 6 fill;
    border-image-width: .06rem .06rem;
    border-image-outset: .06rem .06rem;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.skin_thumb img {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
    position: relative;
}

.skin_info {
    padding-top: .12rem;
}

.skin_name {
    display: block;
    position: relative;
    font-family: font2;
    font-size: .22rem;
    color: #a5a387;
    paint-order: stroke fill;
}

.skin_name::before {
    font-family: font2;
    content: attr(data-text);
    display: block;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 0;
    pointer-events: none;
    text-shadow: -.02rem -.02rem .03rem rgba(0, 0, 0, .6), .02rem -.02rem .06rem rgba(0, 0, 0, .6), -.02rem .02rem .06rem rgba(0, 0, 0, .6), .02rem .02rem .06rem rgba(0, 0, 0, .6), -.02rem -.02rem -.10rem rgba(0, 0, 0, .6), .02rem -.02rem -.10rem rgba(0, 0, 0, .6), -.02rem .02rem -.10rem rgba(0, 0, 0, .6), .02rem .02rem -.10rem rgba(0, 0, 0, .6), -.02rem -.02rem .16rem rgba(0, 0, 0, .6), .02rem -.02rem .16rem rgba(0, 0, 0, .6), -.02rem .02rem .16rem rgba(0, 0, 0, .6), .02rem .02rem .16rem rgba(0, 0, 0, .6);
}

.skin_name::after {
    font-family: font2;
    line-height: 1.2;
    background-size: 100% calc(.22rem * 1.2);
    background: linear-gradient(to top, rgba(93, 88, 68, .85) 5%, rgba(255, 170, 23, 0) 80%) bottom 0 left 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    content: attr(data-text);
    pointer-events: none;
    display: block;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 0;
    overflow-wrap: anywhere;
}

.skin_percent {
    color: #d5d5d5;
    font-size: .13rem;
    margin-top: .14rem;
}

.part_note {
    -o-border-image: url("//game.gtimg.cn/images/poe2/mysterybox/conditions-container.webp");
    border-image: url("//game.gtimg.cn/images/poe2/mysterybox/conditions-container.webp");
    border-image-slice: 300 500 300 fill;
    border-image-width: 3.00rem 5.00rem 3.00rem;
    border-image-outset: .50rem 1.90rem 1.60rem;
    max-width: 10.2rem;
    margin: .60rem auto .80rem;
    padding: .2rem .75rem 0;
}

.tit-note{
    background-image: url("//game.gtimg.cn/images/poe2/mysterybox/txt_bg.png");
    background-size: auto 100%;
    height: .28rem;
    line-height: .28rem;
    color: #9c975e;
    font-size: .2rem;
    position: relative;
    font-family: font2;
    text-indent: .2rem;
    margin-bottom: .3rem;
}

.part_note h4 {
    font-size: .18rem;
    font-family: font2,serif;
    margin: .1rem 0;
    color: #9f9f9f;
}
.part_note p{
    margin-bottom: .2rem;
    font-size: .14rem;
    color: #848484;
}

.part-thanks{
    position: relative;
    padding-bottom: 1.4rem;
}
.part-thanks::after{
    content: "";
    position: absolute;
    bottom: -.4rem;
    background: url("//game.gtimg.cn/images/poe2/mysterybox/early-access-banner.webp") no-repeat center bottom/100%;
    height: 1.78rem;
    width: 100%;
    left: 0;
}

.part-thanks h2{
    margin: .9rem 0 .2rem;
    position: relative;
    font-family: font2;
    font-size: .46rem;
    color: #9f9f9f;
    text-align: center;
    line-height: 1.2;
}
.part-thanks h2::before{
    font-size: .46rem;
    font-family: font2;
    line-height: 1.2;
    background-size: 100% calc(.46rem * 1.2);
    background: linear-gradient(to top, rgba(93, 88, 68, .85) 5%, rgba(255, 170, 23, 0) 80%) bottom 0 left 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    content: attr(data-text);
    pointer-events: none;
    display: block;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 0;
    overflow-wrap: anywhere;
}
.part-thanks p{
    background-image: url("//game.gtimg.cn/images/poe2/mysterybox/txt_thanks_bg.png");
    background-size: auto 100%;
    background-position: center center;
    font-size: .14rem;
    color: #919191;
    text-align: center;
    padding: .3rem 0;
    line-height: 2.4;
}