html {
    font-size: 625%;
}

/*reset*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-weight: normal;
    font-style: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 100%;
}

q:before,
q:after {
    content: '';
}

fieldset,
img,
abbr,
acronym {
    border: 0;
}

/*页面样式*/
.c:before,
.c:after {
    content: "";
    display: table;
}

.c:after {
    clear: both;
}

.c {
    zoom: 1;
}

body {
    font: 0.12rem/1.5 '\5FAE\8F6F\96C5\9ED1';
    padding-top: 0;
    text-align: justify;
    overflow-x: hidden;
    background: #000;
}

a {
    text-decoration: none;
    overflow: hidden;
    outline: none;
    transition: filter .2s linear;
}

a:hover {
    text-decoration: none;
}

:focus {
    outline: none;
}

.wrap,
#footer_ied {
    min-width: 16rem;
    width: 100%;
    _width: expression((document.documentElement.clientWidth||document.body.clientWidth)<1602?'16rem':'');
}

.container {
    width: 16rem;
    margin: 0 auto;
    position: relative;
}

.hide {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

/*底部样式*/
#afooter {
    text-align: center;
    line-height: 0.2rem;
    height: 1.71rem;
    font-size: 0.16rem;
    color: #6a6a6a;
    min-width: 16rem;
    padding-top: 1.03rem;
    background: url(//game.gtimg.cn/images/poe/act/new20240704/footer.png) center / auto 100% repeat;
    position: relative;
    margin-top: -0.2rem;
}

#afooter a {
    color: #6a6a6a;
}

img {
    display: block;
}

.pr {
    position: relative
}


.wrap {
    background: url(//game.gtimg.cn/images/poe/cp/a20260722/bg.jpg) repeat-y center 0, #000;
    background-size: 100% auto;
    padding-bottom: 1rem;
}

.head {
    position: relative;
    height: 7.5rem;
}

.content {
    position: relative;
}

.head:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 19.2rem;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.head:before {
    background: url(//game.gtimg.cn/images/poe/cp/a20260722/bg_top.png) no-repeat center 0;
    background-size: 100% 100%;
}

.head>*,
.content>* {
    position: relative;
    z-index: 1;
}

.flx div {
    position: relative;
}

.box {
    width: 14.57rem;
    height: 5.86rem;
    position: relative;
    margin: 0 auto 0.13rem;
}

.content>.box:not(.season-panel) {
    display: block;
}

.head .main-title {
    position: absolute;
    left: 50%;
    top: 2.9rem;
    transform: translateX(-50%);
    pointer-events: none;
}

.season-panel {
    width: 14.57rem;
    height: 5.86rem;
    overflow: hidden;
    background: #020202;
    box-shadow: 0 0 0.22rem rgba(190, 122, 42, .16);
}

.season-panel .panel-media {
    position: absolute !important;
    left: 0.08rem !important;
    top: 0.02rem !important;
    width: 14.41rem !important;
    height: 5.82rem !important;
    object-fit: cover;
    z-index: 1;
}

.season-panel .panel-static {
    top: 0.09rem !important;
    height: 5.68rem !important;
}

.season-panel .panel-video {
    position: absolute !important;
    top: 0.02rem !important;
    width: 10.35rem !important;
    height: 5.82rem !important;
    object-fit: cover;
    z-index: 1;
}

.season-panel.title-left .panel-video {
    left: auto !important;
    right: 0.02rem !important;
}

.season-panel.title-right .panel-video {
    left: 0.02rem !important;
    right: auto !important;
}

.season-panel .panel-mask {
    position: absolute;
    top: 0.02rem;
    height: 5.82rem;
    z-index: 2;
    pointer-events: none;
}

.season-panel.title-left .panel-mask {
    left: 0;
    width: 56%;
    background: linear-gradient(to right, #000 0%, #000 58%, rgba(0, 0, 0, .72) 75%, rgba(0, 0, 0, .28) 90%, transparent 100%);
}

.season-panel.title-right .panel-mask {
    right: 0;
    width: 56%;
    background: linear-gradient(to left, #000 0%, #000 58%, rgba(0, 0, 0, .72) 75%, rgba(0, 0, 0, .28) 90%, transparent 100%);
}

.season-panel .panel-title {
    position: absolute;
    top: 1.32rem;
    z-index: 4;
    pointer-events: none;
}

.season-panel.title-left .panel-title {
    left: 0.7rem;
}

.season-panel.title-right .panel-title {
    right: 0.7rem;
}

.content .season-panel .panel-copy {
    position: absolute;
    top: 2.54rem;
    z-index: 4;
    color: #e1e0df;
    font: 0.18rem/0.34rem '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
    pointer-events: none;
    text-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, .9);
    white-space: nowrap;
    overflow: visible;
    max-width: none;
}

.season-panel.title-left .panel-copy {
    left: 0.7rem;
    text-align: left;
}

.season-panel.title-right .panel-copy {
    right: 0.7rem;
    text-align: right;
}

.season-panel:is(.box3, .box4, .box10, .box11, .box12, .box13) .panel-title {
    top: 0.58rem;
}

.season-panel:is(.box3, .box10, .box11, .box12, .box13) .panel-copy {
    top: 1.96rem;
}

.season-panel.box7 .panel-copy {
    top: 3.08rem;
}

.season-panel.box8 .panel-copy {
    top: 2.28rem;
}

.season-panel.box4 .panel-copy {
    top: 1.74rem;
}

.season-panel.box11 .panel-copy {
    top: 1.78rem;
}

.season-panel .panel-prop {
    position: absolute;
    bottom: 0.44rem;
    z-index: 4;
    display: block;
    pointer-events: auto;
    filter: drop-shadow(0 0.08rem 0.14rem rgba(0, 0, 0, .65));
}

.season-panel.title-left .panel-prop {
    left: 0.7rem;
}

.season-panel.title-right .panel-prop {
    right: 0.7rem;
}

.season-panel .panel-prop>img {
    display: block;
    max-width: 5.2rem;
    max-height: 2.1rem;
    object-fit: contain;
    pointer-events: none;
}

.season-panel .panel-prop--4 {
    bottom: 0.96rem;
}

.season-panel .panel-prop--11 {
    bottom: 0.42rem;
}

.season-panel .panel-prop:hover {
    z-index: 8;
}

.panel-prop-hotspot {
    position: absolute;
    display: block;
    cursor: default;
}

.panel-prop-hover {
    position: absolute;
    display: none;
    max-width: none;
    max-height: none;
    pointer-events: none;
    z-index: 100;
}

.panel-prop-hover.is-show {
    display: block;
}

.season-panel .border {
    z-index: 5;
}

.box .video_mask {
    position: absolute;
    background: linear-gradient(to right, black 0%, black 20%, rgb(0, 0, 0) 60%, rgba(0, 0, 0, .7) 75%, rgba(0, 0, 0, .6) 85%, rgba(0, 0, 0, .2) 95%, transparent 100%);
    width: 50%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.box .video_mask2 {
    position: absolute;
    width: 70%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to left, black 0%, black 60%, transparent);
    top: 0;
    right: 0;
    pointer-events: none;
}

.box .text_box {
    position: absolute;
    font-size: 0.18rem;
    color: #dad9d9;
    font-family: '微软雅黑';
    line-height: 0.36rem;
    z-index: 5;
}

.box .text_box p {
    margin-bottom: 0.22rem;
}

.box .text_box_left {
    left: 0.7rem;
}

.box .text_box_right {
    right: 0.7rem;
    text-align: right;
}

.box1 .text_box {
    top: 2.64rem;
}

.box2 .text_box {
    top: 1.81rem;
}

.box .flx,
.box p {
    z-index: 3
}

.box .border {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    object-fit: cover;
    pointer-events: none;
}

.box:nth-of-type(2n) video {
    position: absolute;
    left: 0.1rem;
    top: 0.06rem;
    width: 10.31rem;
    height: 5.79rem;
    z-index: 1;
}

.box:nth-of-type(2n+1) video {
    position: absolute;
    right: 0.1rem;
    top: 0.06rem;
    width: 10.31rem;
    height: 5.79rem;
    z-index: 1;
}

.box3 .text_box {
    top: 1.79rem;
}

.box3 .flx {
    width: 3.96rem;
    position: absolute;
    left: 0.68rem;
    top: 4.54rem;
}

.box3 .flx img {
    flex-shrink: 0;
    margin-left: -0.02rem;
}

.box3 .flx img:first-child {
    margin-left: 0
}

.box4 .text_box {
    top: 3.04rem;
}

.box5 .text_box {
    top: 2.73rem;
}

.box5 .flx {
    width: 1.07rem;
    position: absolute;
    left: 0.73rem;
    top: 4.19rem;
}

.box6 .text_box {
    top: 2.38rem;
}

.box6 .flx {
    width: 1.7rem;
    position: absolute;
    right: 0.76rem;
    bottom: 1.16rem;
}

.box7 .text_box {
    top: 2.58rem;
}

.box7 .flx {
    width: 1.12rem;
    position: absolute;
    left: 0.7rem;
    top: 4.28rem;
}

.box8 .text_box {
    top: 2.27rem;
}

.box8 .flx {
    width: 0.92rem;
    position: absolute;
    right: 0.72rem;
    top: 3.65rem;
}

.box9 .text_box {
    top: 2.54rem;
}

.box9 .flx {
    width: 1.57rem;
    position: absolute;
    left: 0.7rem;
    bottom: 1.62rem;
}

.box10 .text_box {
    top: 1.92rem;
}

.box11 .text_box {
    top: 1.79rem;
}

.box11 .flx {
    width: 1.07rem;
    position: absolute;
    left: 0.69rem;
    bottom: 0.66rem;
}

.box12 .text_box {
    top: 1.63rem;
}

.box12 .flx {
    width: 1.15rem;
    position: absolute;
    right: 0.7rem;
    bottom: 0.5rem;
}

.box13 .text_box {
    top: 3rem;
}

.flx {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box .flx {
    z-index: 10;
}

.an {
    display: none;
    position: absolute;
    left: 50%;
    z-index: 4;
}

.showcase-card {
    width: 14.95rem;
    height: 6.03rem;
    margin: 0 auto 0.28rem;
    position: relative;
    overflow: hidden;
    background: #000;
}

.showcase-card__media {
    position: absolute;
    inset: 0.2rem 0.18rem 0.18rem;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .58) 62%, rgba(0, 0, 0, .9) 77%, #000 100%),
        url(//game.gtimg.cn/images/poe/cp/a20260722/panel3_big2.jpg) center / cover no-repeat;
    filter: saturate(.9) brightness(.78);
}

.showcase-card__media:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 72%, rgba(74, 146, 90, .28) 0, rgba(74, 146, 90, 0) 22%),
        radial-gradient(circle at 13% 83%, rgba(80, 142, 255, .32) 0, rgba(80, 142, 255, 0) 12%),
        radial-gradient(circle at 28% 78%, rgba(80, 142, 255, .22) 0, rgba(80, 142, 255, 0) 10%);
    pointer-events: none;
}

.showcase-card__media:after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, .75);
    pointer-events: none;
}

.showcase-card__content {
    position: absolute;
    top: 1.2rem;
    right: 0.92rem;
    width: 4.7rem;
    z-index: 2;
    text-align: right;
}

.showcase-card__title {
    margin-bottom: 0.28rem;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04rem;
    background: linear-gradient(180deg, #f7e8b1 0%, #d9b868 42%, #8d5d1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 0.12rem rgba(222, 170, 72, .18);
}

.showcase-card__text {
    font-size: 0.18rem;
    line-height: 2;
    color: #c9c2b5;
}

.showcase-card__text p {
    margin-bottom: 0.18rem;
}

.showcase-card__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.btn_buy {
    display: block;
    margin: 0.8rem auto 0;
    width: 3.07rem;
    height: 0.95rem;
    background: url("//game.gtimg.cn/images/poe/cp/a20260722/btn_buy.png") no-repeat;
    transition: .3s filter
}

.btn_buy:hover {
    filter: brightness(1.2)
}

.stackSize,
.iconTier {
    font-family: '微软雅黑', serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    position: absolute;
    text-shadow: -0.01rem -0.01rem 0 #000, 0 -0.01rem 0 #000, 0.01rem -0.01rem 0 #000, 0.01rem 0 0 #000, 0.01rem 0.01rem 0 #000, 0 0.01rem 0 #000, -0.01rem 0.01rem 0 #000, -0.01rem 0 0 #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-text-stroke: .25em black;
    paint-order: stroke;
}

.stackSize {
    top: -0.052rem;
    left: 0.208rem;
}

.iconTier {
    bottom: -0.052rem;
    right: 0.208rem;
}