* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 10vw;
}

@font-face {
    font-family: 'almm';
    /* 自定义字体名称 */
    src: url('../../css/AlimamaFangYuanTiVF-Thin.ttf') format('truetype');
    /* 字体文件路径 */
    font-weight: 500;
    /* 字体权重 */
    font-style: normal;
    /* 字体样式 */
}

#header {
    position: fixed;
    width: 100%;
    height: 1.47rem;
    background-image: url('../img/header.png');
    background-size: 10rem 1.47rem;
    top: 0;
    z-index: 99999;
}

#main {
    margin-top: 1.47rem;
    width: 100%;
    /* height: 45.15rem; */
    background: url('../img/bg.jpg') no-repeat top center;
    background-size: 100%;
    overflow: hidden;
    font-family: 'almm';
    position: relative;
    padding-bottom: 1.5rem;
}

.btn-box {
    position: relative;
    top: 5.7rem;
    width: 100%;
    height: 0.71rem;
    background-image: url('../img/btn-box.png');
    background-size: 10rem 0.71rem;
    display: flex;
}

.btn {
    width: 2.5rem;
    height: 0.75rem;
    line-height: 0.71rem;
    text-align: center;
    color: rgb(148, 148, 148);
    font-size: 0.32rem;
    letter-spacing: 0.03rem;
}

.btn.btn-active {
    color: rgb(255, 255, 255);
}

.page-box {
    position: relative;
    top: 5.7rem;
    width: 100%;
    height: 32rem;
}

.page {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0 ease, visibility 0 ease;
    padding-top: 0.4rem;
}

.page.page-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.title {
    width: 4.23rem;
    height: 1.84rem;
    background-size: 4.23rem 1.84rem;
    margin: 0.1rem auto 0;
}

.title1 {
    background-image: url('../img/title1.png');
}

.title2 {
    background-image: url('../img/title2.png');
}

.title3 {
    background-image: url('../img/title3.png');
}

.title4 {
    background-image: url('../img/title4.png');
}

.title5 {
    background-image: url('../img/title5.png');
}

.title6 {
    background-image: url('../img/title6.png');
}

.dt-btn-box {
    width: 7.8rem;
    height: 0.48rem;
    margin: 0.3rem auto 0;
    display: flex;
    justify-content: space-between;
}

.dt-btn {
    width: 2.33rem;
    height: 0.44rem;
    background-size: 2.63rem 1.5rem;
    background-position: -0.15rem -0.83rem;
}

.dt-btn-active {
    background-position: -0.15rem -0.12rem;
}

.dt-btn1 {
    background-image: url('../../img/1/1.png');
}

.dt-btn2 {
    background-image: url('../../img/1/2.png');
}

.dt-btn3 {
    background-image: url('../../img/1/3.png');
}

.dt-page-box {
    position: relative;
    margin: 0.1rem auto 0.5rem;
    width: 8.23rem;
    height: 5.5rem;
}

.dt-page {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0 ease, visibility 0 ease;
}

.dt-page.dt-page-active {
    opacity: 1;
    visibility: visible;
}

.dt-swiper {
    position: relative;
    width: 8.23rem;
    height: 4.2rem;
    overflow: hidden;
}

.dt-swiper>div>div>img {
    display: block;
    width: 8.23rem;
    height: 4.2rem;
}

.text-box {
    margin: 0 auto;
    padding: 0 0.1rem;
    width: 7.9rem;
    height: 1.25rem;
    background-image: url('../img/box.png');
    background-size: 7.9rem 1.25rem;
    font-family: 'almm';
    font-size: 0.28rem;
    letter-spacing: 0.01rem;
    line-height: 0.33rem;
    color: #172e4c;
    display: flex;
    align-items: center;
}

.gw-btn-box {
    width: 7.8rem;
    height: 0.48rem;
    margin: 0.3rem auto 0;
    display: flex;
    justify-content: space-between;
}

.gw-btn {
    width: 2.33rem;
    height: 0.44rem;
    background-size: 2.63rem 1.5rem;
    background-position: -0.15rem -0.83rem;
}

.gw-btn-active {
    background-position: -0.15rem -0.12rem;
}

.gw-btn1 {
    background-image: url('../img/gw1.png');
}

.gw-btn2 {
    background-image: url('../img/gw2.png');
}

.gw-btn3 {
    background-image: url('../img/gw3.png');
}

.gw-page-box {
    position: relative;
    margin: 0.5rem auto 0;
    width: 8rem;
    height: 13rem;
}

.gw-page {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0 ease, visibility 0 ease;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.gw-page.gw-page-active {
    opacity: 1;
    visibility: visible;
}

.gw-info {
    width: 3.22rem;
}

.gw-img {
    width: 3.22rem;
    height: 3.64rem;
    background-size: 3.22rem 3.64rem;
}

.gw-img1 {
    background-image: url('../../img/2/雪狼王.png');
}

.gw-img2 {
    background-image: url('../../img/2/雪原巨人.png');
}

.gw-img3 {
    background-image: url('../../img/2/雪原圣兽.png');
}

.gw-img4 {
    background-image: url('../../img/2/蛇妖王.png');
}

.gw-img5 {
    background-image: url('../../img/2/雪原圣女.png');
}

.gw-img6 {
    background-image: url('../../img/2/雪神.png');
}

.gw-img7 {
    background-image: url('../../img/2/寒冰龙神.png');
}

.gw-img8 {
    background-image: url('../../img/2/雪神之魂.png');
}

.gw-img9 {
    background-image: url('../../img/2/雪神之魂隐藏bos.png');
}

.gw-txt {
    width: 3.15rem;
    margin: 0 auto 0.03rem;
    font-family: 'almm';
    font-size: 0.24rem;
    letter-spacing: 0.01rem;
    line-height: 0.25rem;
    color: #172e4c;
    border: 0.01rem solid #000;
    background-color: rgba(179, 219, 255, 30%);
    padding: 0.05rem;
}

.ps-box {
    position: relative;
    width: 8.51rem;
    height: 4.38rem;
    margin: 0 auto;
    overflow: hidden;
}

.ps {
    position: relative;
    width: 8.51rem;
    height: 4.38rem;
    background-size: 8.51rem 4.38rem;
}

.ps1 {
    background-image: url('../img/ps1.png');
}

.ps2 {
    background-image: url('../img/ps2.png');
}

.ps3 {
    background-image: url('../img/ps3.png');
}

.ps4 {
    background-image: url('../img/ps4.png');
}

.ps5 {
    background-image: url('../img/ps5.png');
}

.ps-txt1 {
    position: absolute;
    left: 4.85rem;
    top: 1.04rem;
    width: 2.9rem;
    height: 1.8rem;
    font-family: 'almm';
    font-size: 0.26rem;
    letter-spacing: 0.01rem;
    line-height: 0.33rem;
    color: #172e4c;
    display: flex;
    align-items: center;
}

.ps-txt2 {
    position: absolute;
    left: 3.43rem;
    top: 2.9rem;
    width: 4.4rem;
    height: 0.93rem;
    font-family: 'almm';
    font-size: 0.26rem;
    letter-spacing: 0.01rem;
    line-height: 0.33rem;
    color: #172e4c;
    display: flex;
    align-items: center;
}

.txt {
    margin: 0.3rem auto 0;
    width: 9rem;
    font-family: 'almm';
    font-size: 0.26rem;
    letter-spacing: 0.01rem;
    line-height: 0.33rem;
    color: #b3dbff;
}

.little-title {
    margin: 0.3rem auto 0;
    width: 2.89rem;
    height: 0.87rem;
    background-size: 2.89rem 0.87rem;
}

.little-title1 {
    background-image: url('../../img/3/雪原配饰标题.png');
}

.little-title2 {
    background-image: url('../../img/3/新增材料标题.png');
}

.little-title3 {
    background-image: url('../../img/3/雪山圣物标题.png');
}

.little-title4 {
    background-image: url('../../img/4/魔域重装锻造标题.png');
}

.little-title5 {
    background-image: url('../../img/4/兵甲鉴定标题.png');
}

.little-title6 {
    background-image: url('../../img/4/魔晶赋能标题.png');
}

.qnxj{
    position: relative;
    margin: 0 auto;
    width: 8.53rem;
    height: 2.16rem;
    background-image: url('../../img/3/千年玄晶.png');
    background-size: 8.53rem 2.16rem;
}

.qnxj-txt1{
    position: absolute;
    top: 0.56rem;
    left: 1.25rem;
    width: 7rem;
    font-family: 'almm';
    font-size: 0.24rem;
    letter-spacing: 0.01rem;
    line-height: 0.3rem;
    color: #172e4c;
}
.qnxj-txt2{
    position: absolute;
    top: 1.29rem;
    left: 0.3rem;
    width: 8rem;
    font-family: 'almm';
    font-size: 0.24rem;
    letter-spacing: 0.01rem;
    line-height: 0.25rem;
    color: #172e4c;
}
.dj-img {
    margin: 0.2rem auto 0;
    width: 8.53rem;
    height: 4.61rem;
    background-size: 8.53rem 4.61rem;
}

.dj-img1{
    background-image: url('../../img/3/千年玄晶图.png');
}

.dj-img2{
    background-image: url('../../img/3/雪山圣物图.png');
}

.sw1{
    position: relative;
    margin: 0 auto;
    width: 8.53rem;
    height: 1.63rem;
    background-image: url('../../img/3/圣物：骨笛.png');
    background-size: 8.53rem 1.63rem;
}

.sw2{
    position: relative;
    margin: 0.2rem auto 0;
    width: 8.53rem;
    height: 1.63rem;
    background-image: url('../../img/3/圣物：兽角.png');
    background-size: 8.53rem 1.63rem;
}

.jn-btn-box {
    width: 7.11rem;
    height: 0.44rem;
    margin: 0.3rem auto 0;
    display: flex;
    justify-content: space-between;
}

.jn-btn {
    width: 2.33rem;
    height: 0.44rem;
    background-size: 2.63rem 1.5rem;
    background-position: -0.15rem -0.83rem;
    cursor: pointer;
}

.jn-btn-active {
    background-position: -0.15rem -0.12rem;
}

.jn-btn1 {
    background-image: url('../img/战士.png');
}

.jn-btn2 {
    background-image: url('../img/法师.png');
}

.jn-btn3 {
    background-image: url('../img/道士.png');
}

.jn-page-box {
    position: relative;
    margin: 0.3rem auto 0;
    width: 7.5rem;
    height: 5.05rem;
}

.jn-page {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0 ease, visibility 0 ease;
}

.jn-page.jn-page-active {
    opacity: 1;
    visibility: visible;
}

.jn-box {
    width: 7.5rem;
    display: flex;
    justify-content: space-between;
}

.jn-box>div {
    width: 3.67rem;
}

.jn-box>div>img {
    display: block;
    width: 3.67rem;
    margin: 0 auto;
}

.jn-txt {
    width: 3.67rem;
    height: 1.57rem;
    margin-top: 0.15rem;
    font-size: 0.24rem;
    background-size: 3.67rem 1.57rem;
    display: flex;
    align-items: end;
}

.jn-info{
    width: 3.67rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    font-family: 'almm';
    font-size: 0.24rem;
    line-height: 0.26rem;
    padding: 0 0.05rem;
    letter-spacing: 0.01rem;
    color: #172e4c;
}

.jn-txt1 {
    background-image: url('../../img/5/剑气爆简介.png');
}

.jn-txt2 {
    background-image: url('../../img/5/护身真气简介.png');
}

.jn-txt3 {
    background-image: url('../../img/5/定身咒简介.png');
}

.jn-txt4 {
    background-image: url('../../img/5/遁地术简介.png');
}

.jn-txt5 {
    background-image: url('../../img/5/兽化简介.png');
}

.jn-txt6 {
    background-image: url('../../img/5/冰霜屏障简介.png');
}

.wf-img {
    margin: 0.3rem auto 0.8rem;
    width: 8.34rem;
    height: 5.35rem;
    background-size: 8.34rem 5.35rem;
}

.wf-img1{
    background-image: url('../../img/4/魔域重装锻造.png');
}

.wf-img2{
    background-image: url('../../img/4/兵甲鉴定.png');
}

.wf-img3{
    background-image: url('../../img/4/魔晶赋能.png');
}

.qtgx {
    margin: 0.2rem auto;
    width: 8.5rem;
    font-size: 0.25rem;
    letter-spacing: 0.02rem;
    line-height: 0.6rem;
    color: #f5f5f5;
}

.goBack {
    margin: 0.3rem auto 0;
    width: 1.59rem;
    height: 1.53rem;
    z-index: 99999;
    background-image: url('../img/返回顶部.png');
    background-size: 1.59rem 1.53rem;
}

.qtgx-img {
    margin: 0.2rem auto 0;
    width: 6.5rem;
    display: flex;
    justify-content: space-between;
}

.qtgx-img>img {
    display: block;
}

.qtgx-img>img:nth-child(1) {
    width: 3.02rem;
    height: 4.62rem;
}

.qtgx-img>img:nth-child(2) {
    width: 3.02rem;
    height: 5.88rem;
}