img {
  border: none;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
}

.container,.mySwiper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.bottom-fixed{
    width: 100%;
    position: fixed;
    bottom: 0.1rem;
    left: 0;
    z-index: 999;
}

.store-info{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,0%);
}

.icon-arrow{
    position: fixed;
    bottom: 0.2rem;
    left: 50%;
    z-index: 999;
}

.store-info img{
    width: 2.33rem;
    height: 0.72rem;
    cursor: pointer;
   /* margin: 0 0.05rem;*/
}
.store-info img + img{
    margin-left: 0.1rem;
}

.section2{
    width: 100%;
    height: 100%;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/section2.png) no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.section2-text{
    width: 2.55rem;
    height: 0.77rem;
    margin: 1.2rem auto;
}

.news-title{
    width: 1.15rem;
    height: 0.37rem;
    margin: 0.15rem 0.3rem;
    color: #c7bfa6;
    font-size: 0.2rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 3px;
}

.current-active{
    width: 1.15rem;
    height: 0.37rem;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/add-bg.png) no-repeat;
    background-size: 100% 100%;
}

.news-banner{
    width: 8.25rem;
    height: 5.22rem;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/news-banner-popup.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 0.2rem;
    position: relative;
    overflow: hidden;
}

.news-banner .swiper-slide {
  margin: 0.4rem auto 0.2rem;
}

.swiper-slide .new-baner{
  width: 6.87rem;
  height: 4.01rem;
}

.news-swiper-pagination{
    width: 3rem;
    height: 0.3rem;
    margin: 0 auto;
}

.news-swiper-pagination .swiper-pagination-bullet {
    width: 0.19rem;
    height: 0.19rem;
    margin: 0 0.05rem;
    background: transparent;
    border: none;
    opacity: 1;
    background-image: url('//cdn.htgames.net/gw/legendofheroes/static/image/pc/icon-check.png');
    background-size: cover;
}

.news-swiper-pagination .swiper-pagination-bullet-active {
    background-image: url('//cdn.htgames.net/gw/legendofheroes/static/image/pc/icon-checked.png');
}

.news-info{
    width: 8.25rem;
    height: 5.22rem;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/news-info-popup.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.news-article{
    width: 7.8rem;
    height: 4.2rem;
    /* background-color: aqua; */
    margin: 0 auto;
    overflow: hidden;
}

.news-article li{
    display: flex;
    align-items: center;
    color: #3d1812;
    border-bottom: 1px solid #ddcd99;
    padding: 0.07rem 0.05rem;
    font-size: 0.18rem;
    cursor: pointer;
}

.news-article li .title{
    /* width: 0.55rem; */
    text-align: center;
    padding-left: 0.2rem;
}

.news-article li .des{
    width: 5.9rem;
    padding-left: 0.2rem;
}

.news-article li .date{
    padding-left: 0.2rem;
}

.section3 {
    width: 100%;
    height: 100%;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/section3.png) no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.section3-text{
    width: 2.66rem;
    height: 0.76rem;
    margin: 1rem auto 0.3rem;
}

.game-world,.game-story{
    width: 3.74rem;
    height: 6.21rem;
    margin: 0 0.35rem;
    position: relative;
    transition: transform 0.5s ease;
}

.game-world:hover {
    transform: scale(1.1); /* 鼠标移入时放大 1.1 倍 */
}
.game-story:hover {
    transform: scale(1.1); /* 鼠标移入时放大 1.1 倍 */
}

.look-details{
    width: 0.58rem;
    height: 0.59rem;
    position: absolute;
    bottom: 0.35rem;
    left: 50%;
    transform: translate(-50%,-50%);
}

.plus-box{
    width: 0.58rem;
    height: 0.59rem;
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/plus-box.png) no-repeat;
    background-size: 100% 100%;
    /* transition: all 0.3s ease-in-out; */
    cursor: pointer;
}

.plus-box img{
    width: 0.38rem;
    height: 0.38rem;
    position: absolute;
    left: 0.1rem;
    top: 0.1rem;
}

.look-details-text{
    color: #fff;
    font-size: 0.18rem;
    font-weight: bold;
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

.left-character{
    width: 5.25rem;
    height: 4.64rem;
    position: absolute;
    top: 3.8rem;
    left: 0.8rem;
}

.right-character{
    width: 5.25rem;
    height: 4.64rem;
    position: absolute;
    top: 3.8rem;
    right: 0.8rem;
}

.section4{
    width: 100%;
    height: 100%;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/section4.png) no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.section4-text{
    width: 2.64rem;
    height: 0.76rem;
    margin: 1rem auto 0.5rem;
}

.feature-swiper{
    width: 12rem;
    margin: 0 auto;
    position: relative;
}

.feature-baner{
    width: 9.12rem;
    height: 5.4rem;
}

.left-icon,
.right-icon {
  width: 0.53rem;
  height: 0.53rem;
  position: absolute;
  top: 2.5rem;
  z-index: 2;
}

.left-icon {
  left: -0.8rem;
}

.right-icon {
  right: -0.7rem;
}

.section5{
    width: 100%;
    height: 100%;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/section5.png) no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.section5-text{
    width: 2.62rem;
    height: 0.79rem;
    margin: 1.5rem auto 0.5rem;
}

.section5-box{
    width: 11.12rem;
    height: 4.96rem;
    margin: 0 auto;
    position: relative;
}

.look-details-btn{
    width: 1.17rem;
    height: 0.37rem;
    position: absolute;
    bottom: 0.3rem;
}

.audio-player{
    position: absolute;
    right: -999px;
}

.section6{
    width: 100%;
    height: 2.36rem;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/foote-bg.png) no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.footer-icon{
    width: 1.15rem;
    height: 1.15rem;
}

.footer-text{
    width: 10.29rem;
    height: 1.29rem;
}

.section6-content{
    margin: 0.5rem 0;
}

.agreement-btn{
    width: 1.08rem;
    height: 0.25rem;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
}

.agreement-btn > a{
    margin: 0.25rem 0;
    display: block;
    font-size: 0.2rem;
}
.swiper{
    height: 100vh;
}
.swiper-wrapper .swiper-slide:nth-last-of-type(1) {
    height: auto !important;
}

.recharge-popup{
    width: 14.34rem;
    height: 7.23rem;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/recharge-popup.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.recharge-close{
    width: 0.58rem;
    height: 0.59rem;
    position: absolute;
    top: 0.2rem;
    right: -0.2rem;
}

.recharge-popup-text{
    width: 7.2rem;
    height: 4.1rem;
    margin: 1.3rem 0 0.05rem 4.2rem;
    overflow: hidden;
}

.recharge-popup-text1 {
    width: 5.05rem;
    height: 0.83rem;
    margin: 0.5rem auto;
}
.recharge-popup-text2 {
    width: 6.25rem;
    height: 0.95rem;
    margin: 0.4rem auto;
}
.recharge-popup-text3 {
    width: 5.45rem;
    height: 0.38rem;
    margin: 0.1rem auto;
}
.recharge-popup-line{
    width: 6.2rem;
    height: 0.07rem;
    margin: 0 auto;
}
.recharge-popup-btn{
    width: 4.96rem;
    height: 0.99rem;
    margin: 0.1rem auto;
}
.recharge-popup-tip input{
    width: 0.3rem;
    height: 0.3rem;
}
.recharge-popup-tip p{
    color: #fff;
    font-size: 0.2rem;
    margin-left: 0.15rem;
}
/* 定义复选框样式 */
input[type="checkbox"] {
    width: 0.25rem; /* 宽度 */
    height: 0.25rem; /* 高度 */
    display: inline-block;
    cursor: pointer;
    position: relative; /* 相对定位 */
    -webkit-appearance: none; /* 移除默认样式 */
    -moz-appearance: none; /* 移除默认样式 */
    appearance: none; /* 移除默认样式 */
    border: 1px solid #ebcb86; /* 边框 */
    background-color: #ffffff;
}
/* 自定义选中状态下的对勾图标 */
input[type="checkbox"]:checked::before {
    content: "✔"; /* 对勾文本或图标 */
    display: inline-block; /* 内联块级元素 */
    font-weight: bold; /* 字体加粗 */
    color: #000; /* 文本颜色 */
    position: absolute; /* 绝对定位 */
    left: 0;
    top: -0.09rem;
    font-size: 0.3rem;
}
.section1{
    width: 26rem;
    height: 12.8rem;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}