@charset "utf-8";
/*
 * Dislyte 海外官网 · 角色列表页（移动端 m/）
 * 第 1 段：源站 m/css/style.css + m/css/character.css 原值（源站移动子页只加载这两份）
 *          已去注释；rem 按源站子页 head 的 setFont（html 字号 = 屏宽 / 750 × 100）换算为 vw（1rem = 13.3333vw）；
 *          素材路径改为项目 img/m/ 与 font/；区块背景改由 config 驱动
 * 第 2 段：适配层——Swiper 11 兼容、config 驱动的图位
 * 由 .a2web/replicate/build-css-character.mjs 生成，改源站值请改脚本后重跑
 */

/* ================= 源站样式 ================= */
body,h1,h2,h3,h4,input,label,li,p,ul{margin: 0;padding: 0}
body{font: 14px / 1.5 "Microsoft YaHei","Tahoma,Arial",sans-serif;-webkit-text-size-adjust:none;color:#929392;text-align: left;background-color:#8f79fe;}
a{color:#929392;vertical-align: baseline;text-decoration: none !important;outline:0;}
body{-webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-y: scroll; overscroll-behavior-y: contain;}
*:focus{outline: none !important;}
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}
body{-webkit-text-size-adjust: 100%!important;}
li,ul{list-style-type: none}
.hid{display: block;height: 0;overflow: hidden}
.tn{text-indent: -9999em;overflow:hidden;display:block}
.fl{float: left}
.fr{float: right}
.pa{position: absolute}
.pr{position: relative}
.cfix:after{display:table;content:"";clear:both}
a img,img{border: none}
.oh{overflow: hidden;}
em{font-style:normal}
.wrapper{width: 100%;overflow: hidden;}
.hd{display: none;}
.bg{background-repeat: no-repeat;background-position: 0 0;background-size: cover}
@font-face{font-family:'Helvetica';src:url(../font/Helvetica.woff) format('woff'),url(../font/Helvetica.ttf) format('truetype');font-display:swap}
@font-face{font-family:'IMPACT'; src:url(../font/IMPACT.woff) format('woff'),url(../font/IMPACT.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Helvetica_Bold';src:url(../font/Helvetica-Bold.woff) format('woff'),url(../font/Helvetica-Bold.otf) format('truetype');font-display:swap}
.swiper-slide{-webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
.pop_Mark{width:100%;height:100%;background-color:rgba(0,0,0,.9);position:fixed;top:0;left:0;display:none;z-index:998;}
.pop_Mark2{width:100%;height:100%;background-color:rgba(0,0,0,.9);position:fixed;top:0;left:0;display:none;z-index:999;}
.orientation_mask{width:100vw;height:100vh;background-color:#000;position:fixed;top:0;left:0;display:none;z-index:999;}
.pop{position: fixed;left: 50%;transform: translate(-50%, -50%);transition: all .5s;top: 50%;}
.pop_close{width: 6.5778vw;height: 6.5778vw;position: absolute;right: 6.2222vw;top: 10.6667vw; transition: all .3s; z-index: 999;}
.pop_close1{background-image: url(../img/m/common/popup/close1.webp); right: 0.8889vw;top: 0;}
.pop_close0{background-image: url(../img/m/common/popup/close1.webp); right: 0.8889vw;top: -7.2889vw;}
.pop_close2{background-image: url(../img/m/common/popup/close2.webp);}
.nav_box{width: 100%; height: 22.2227vw; background-image: url(../img/m/common/header/top_nav_bg.webp); position: fixed; top: 0; left: 0; z-index: 996;}
.nav_box .nav_cen_box{height: 22.2227vw; position: relative; display: flex; justify-content: space-around;align-items: center; margin: 0 3.5556vw 0 3.5556vw;}
.nav_box .nav_cen_box .top_icon{width: 16.8889vw; height: 16.8889vw; background-image: url(../img/m/common/header/top_icon.webp);}
.nav_box .nav_cen_box .logo{width: 25.0667vw; height: 8.7111vw; background-image: url(../img/m/common/header/logo.webp);}
.nav_box .nav_cen_box .music_btn{display: block; width: 6.2222vw; height: 5.6889vw; background-image: url(../img/m/common/header/music_on.webp);}
.nav_box .nav_cen_box .music_btn.pause{display: block; width: 6.2222vw; height: 5.5111vw; background-image: url(../img/m/common/header/music.webp);}
.nav_box .nav_cen_box .language{display: block; width: 5.8667vw; height: 5.8667vw; background-image: url(../img/m/common/header/language.webp);}
.nav_box .nav_cen_box .zw{width: 3.7333vw;height: 0.6667vw;}
.play_now{display: block; width: 39.1111vw; height: 8.8889vw; background-image: url(../img/m/common/header/play_now.webp); text-align: center; line-height: 7.3333vw; font-size: 4.5333vw; color: #1e2731; font-family: 'IMPACT';}
.hamburger{display: inline-block; position: fixed; top: 8vw; right: 4vw; z-index: 999;}
.hamburger .line{width: 5.0667vw;height: 0.8vw;background-color: #fff;display: block;margin: 1.0667vw auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#hamburger-1.onSelect .line:nth-child(1){-webkit-transform: translateY(1.7333vw) rotate(45deg);-ms-transform: translateY(1.7333vw) rotate(45deg);-o-transform: translateY(1.7333vw) rotate(45deg);transform: translateY(1.7333vw) rotate(45deg);}
#hamburger-1.onSelect .line:nth-child(2){opacity: 0;}
#hamburger-1.onSelect .line:nth-child(3){-webkit-transform: translateY(-1.7333vw) rotate(-45deg);-ms-transform: translateY(-1.7333vw) rotate(-45deg);-o-transform: translateY(-1.7333vw) rotate(-45deg);transform: translateY(-1.7333vw) rotate(-45deg);}
@keyframes pulse2{50%{ transform: scale(1.1); }}
@keyframes bottomBanner{0% { transform: translateX(0); } 100% { transform: translateX(-100%); }}
@keyframes rotate{0%,30%{transform:rotate(-90deg)}100%,70%{transform:rotate(0)}}
body,h1,h2,h3,h4,input,label,li,p,ul{margin: 0;padding: 0}
body{font: 14px / 1.5 "Microsoft YaHei","Tahoma,Arial",sans-serif;-webkit-text-size-adjust:none;color:#929392;text-align: left;background-color:#8f79fe;}
a{color:#929392;vertical-align: baseline;text-decoration: none;outline:0;}
li,ul{list-style-type: none}
.hid{display: block;height: 0;overflow: hidden}
.tn{text-indent: -9999em;overflow:hidden;display:block}
.fl{float: left}
.fr{float: right}
.pa{position: absolute}
.pr{position: relative}
.cfix:after{display:table;content:"";clear:both}
a img,img{border: none}
.oh{overflow: hidden;}
em{font-style:normal}
.wrapper{width: 100%;overflow: hidden;}
.bg{background-repeat: no-repeat;background-position: 0 0;background-size: cover}
@font-face{font-family:'Helvetica';src:url(../font/Helvetica.woff) format('woff'),url(../font/Helvetica.ttf) format('truetype');font-display:swap}
@font-face{font-family:'IMPACT'; src:url(../font/IMPACT.woff) format('woff'),url(../font/IMPACT.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Helvetica_Bold';src:url(../font/Helvetica-Bold.woff) format('woff'),url(../font/Helvetica-Bold.otf) format('truetype');font-display:swap}
.nav_box{width: 100%; height: 16.6667vw; background-image: url(../img/m/common/header/top_nav_bg.webp); position: fixed; top: 0; left: 0; z-index: 998;}
.nav_box .nav_cen_box{height: 16.6667vw; position: relative; display: flex; justify-content: space-around;align-items: center; margin: 0 2.6667vw 0 2.6667vw;}
.nav_box .nav_cen_box .top_icon{width: 12.6667vw; height: 12.6667vw; background-image: url(../img/m/common/header/top_icon.webp);}
.nav_box .nav_cen_box .top_text{display: flex; flex-direction: column; align-items: baseline;}
.nav_box .nav_cen_box .top_text p:nth-of-type(1){color: #fff; font-size: 4.8vw; font-family: 'IMPACT';}
.nav_box .nav_cen_box .top_text p:nth-of-type(2){color: #595c80; font-size: 2.5333vw; font-family: 'Helvetica';}
.nav_box .nav_cen_box .music_btn{display: block; width: 4.6667vw; height: 4.2667vw; background-image: url(../img/m/common/header/music_on.webp);}
.nav_box .nav_cen_box .music_btn.pause{display: block; width: 4.6667vw; height: 4vw; background-image: url(../img/m/common/header/music.webp);}
.nav_box .nav_cen_box .language{display: block; width: 4.4vw; height: 4.4vw; background-image: url(../img/m/common/header/language.webp);}
.play_now{display: block; width: 29.3333vw; height: 6.6667vw; background-image: url(../img/m/common/header/play_now.webp); text-align: center; line-height: 6.6667vw; font-size: 4.4vw; color: #1e2731; font-family: 'IMPACT';}
.hamburger .line{width: 3.7333vw;height: 0.6667vw;background-color: #fff;display: block;margin: 1.0667vw auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#hamburger-1.on .line:nth-child(1){-webkit-transform: translateY(1.7333vw) rotate(45deg);-ms-transform: translateY(1.7333vw) rotate(45deg);-o-transform: translateY(1.7333vw) rotate(45deg);transform: translateY(1.7333vw) rotate(45deg);}
#hamburger-1.on .line:nth-child(2){opacity: 0;}
#hamburger-1.on .line:nth-child(3){-webkit-transform: translateY(-1.7333vw) rotate(-45deg);-ms-transform: translateY(-1.7333vw) rotate(-45deg);-o-transform: translateY(-1.7333vw) rotate(-45deg);transform: translateY(-1.7333vw) rotate(-45deg);}
.footer{width: 100%; height: 100%; background-color: #000;}
.footer_center{width: 100%;height: 49.3333vw;margin: 0 auto;display: flex;flex-direction: column;justify-content: center;align-items: center;font-family: 'Helvetica';font-size: 1.8667vw;color: #818181;}
.footer_center .logo_footer{display: flex; justify-content: space-around; align-items: center; width: 65.4667vw;}
.footer_center .logo_footer img{display: block; width: 30.9333vw; height: 10.5333vw;}
.footer_center div{margin: 2.6667vw 0 2.6667vw 0;}
.part1{height: 42vw; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden;}
.part2{height: 15.89; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden;}
.part1 .return{display: block; width: 12vw; height: 5.4667vw; background-image: url(../img/m/common/ui/return2.webp); left: 4vw;top: 17.3333vw;z-index: 99;}
.part1 .center{width: 92%; height: 42vw; position: relative; margin: 0 auto;}
.part1 .center .title_1{left: 0; top: 24vw;}
.part1 .center .title_1 img{width: 100%; height: 100%;}
.part2 .center{width: 92%; height: 211.8667vw; margin: 0 auto;}
.part2 .center .search_box{width: 45.3333vw; height: 4.9333vw; position: absolute; top: 6.6667vw; right: 5.3333vw; display: flex;align-items: center;justify-items: center;}
.part2 .center .search_box .inp{display: block; width: 45.3333vw; height: 4.9333vw; border: none; background-color: #fff; border-radius: 10px; box-sizing: border-box;padding: 0 8vw 0 2vw; font-size: 2.2667vw; color: #747496; font-family: 'Helvetica';}
.part2 .center .search_box .search_btn{display: block; width: 6.6667vw; height: 4.9333vw; background-image: url(../img/m/common/character/search_btn.webp); right: 0; top: 0;}
.part2 .center .rating_box{margin-top: 13.3333vw;line-height: 6.6667vw;}
.part2 .center .rating_box .rating_list{color: #1a1a32; font-family: 'IMPACT';}
.part2 .center .rating_box .rating_list1{font-size: 4.6667vw; margin-right: 2.6667vw;}
.part2 .center .rating_box .rating_list_n{float: left; display: inline-block; width: 13.6vw; height: 3.3333vw; text-align: center; line-height: 3.3333vw; background-color: #fff; border-radius: 5px; font-size: 2.4vw; margin-right: 5px; cursor: pointer;}
.part2 .center .rating_box .rating_list_n.on{background-color: #8f79ff; color: #fff;}
.part2 .center .group_box{margin-top: 6.6667vw;line-height: 6.6667vw;}
.part2 .center .group_box .group_list{color: #1a1a32; font-family: 'IMPACT';}
.part2 .center .group_box .group_list1{font-size: 4.6667vw; margin-right: 2.6667vw;}
.part2 .center .group_box .group_list_n{float: left; display: inline-block; width: 24.2667vw; height: 3.3333vw; text-align: center; line-height: 3.3333vw; background-color: #fff; border-radius: 5px; font-size: 2.4vw; margin-right: 5px; cursor: pointer;}
.part2 .center .group_box .group_list_n.on{background-color: #8f79ff; color: #fff;}
.part2 .center .Attributes_box{margin-top: 6.6667vw;line-height: 6.6667vw;}
.part2 .center .Attributes_box .Attributes_list{color: #1a1a32; font-family: 'IMPACT';}
.part2 .center .Attributes_box .Attributes_list1{font-size: 4.6667vw; margin-right: 2.6667vw;}
.part2 .center .Attributes_box .Attributes_list_n{float: left; display: inline-block; width: 21.6vw; height: 3.3333vw; text-align: center; line-height: 3.3333vw; background-color: #fff; border-radius: 5px; font-size: 2.4vw; margin-right: 5px; cursor: pointer;}
.part2 .center .Attributes_box .Attributes_list_n.on{background-color: #8f79ff; color: #fff;}
.part2 .center .icon_box{width: 100%;height: 146.6667vw;margin-top: 9.3333vw; overflow-y: auto;}
.part2 .center .icon_box ul{display: flex;flex-wrap: wrap;justify-content: start;}
.part2 .center .icon_box ul li{width: 14.9333vw;text-align: center;margin: 1.3333vw 2.6667vw 1.3333vw 0;}
.part2 .center .icon_box ul li img{display: block; width: 14.9333vw; height: 13.8667vw;}
.part2 .center .icon_box ul li span{display: block; font-size: 2.6667vw; color: #1a1a32; font-family: 'Helvetica'; margin-top: 1.3333vw;}
.part2 .center .icon_box .nodata{width: 100%; font-size: 2.6667vw; font-family: 'Helvetica';}
.icon_box::-webkit-scrollbar{width:0.8vw;height:0}
.icon_box::-webkit-scrollbar{background-color:transparent;border-radius:3px}
.icon_box::-webkit-scrollbar-thumb{background-color:#8f79ff;border-radius:20px}
.icon_box::-webkit-scrollbar-track-piece{background-color:#b6b8d7;border-radius:3px}
.icon_box::-webkit-scrollbar-button{background-color:transparent;width:0;height:0}
.icon_box::-webkit-scrollbar-corner{background-color:#b6b8d7;}
.part2 .center .more{display: block; width: 31.2vw; height:8vw; background-image: url(../img/m/common/newspage/more.webp); bottom: 6.6667vw; left: 50%; transform: translateX(-50%); line-height: 8vw;text-align: center;color: #fff; font-size: 4vw; font-family: 'IMPACT'; overflow: hidden;}
.pop_nav .popnav_ul{margin-top: 17.3333vw;}
.pop_nav .popnav_ul li{height: 12vw; color: #fff; font-size: 4.6667vw; font-family: 'Helvetica'; line-height: 12vw; margin: 0 1.3333vw; border-bottom: 1px solid #3e4650;display: flex;align-items: center;}
.pop_nav .popnav_ul li span:nth-of-type(1){display: none; width: 2vw; height: 7.2vw; background-color: #3ef0b5; line-height: 7.2vw; margin-right: 6.6667vw; position: absolute; left: 0;}
.pop_nav .popnav_ul li.on span:nth-of-type(1){display: inline-block;}
.pop_nav .popnav_ul li span:nth-of-type(2){margin-left: 6.6667vw;}
.pop_nav .popnav_icon_box ul{display: flex;justify-content: space-evenly;align-items: center;margin: 8.8889vw auto 0;}
.pop_nav .popnav_icon_box ul li{width: 10vw; height: 8.6667vw;}
.pop_nav .popnav_icon_box ul li a{display: block; width: 100%; height: 100%;}
.pop_nav .popnav_icon_box ul li img{display: block; width: 100%; height: 100%;}
#hamburger-1{top: 5.3333vw;}
.pop_close1_lang{width: 4.9333vw; height: 4.9333vw; background-image: url(../img/m/common/popup/close1.webp); right: 4vw;top: -10.6667vw;}
.poplang_ul{margin-top: 17.3333vw;}
.poplang_ul li{height: 12vw; color: #fff; font-size: 4.6667vw; font-family: 'Helvetica'; line-height: 12vw; margin: 0 8vw; border-bottom: 1px solid #3e4650; display: flex; align-items: center;}
.poplang_ul li.active{color: #8f79fe;}
@media (orientation: landscape){html::before { content: ""; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #000; overflow: hidden; z-index: 99999; }}
@media (orientation: landscape){body::before { content: ""; position: fixed; z-index: 99999; height: 30.2667vw; width: 20vw; left: 50%; top: 50%; margin: -140px 0 0 -50px; color: #fff; background-image: url(../img/m/common/home/heng.webp); background-repeat: no-repeat; background-position: center center; background-size: 100px auto; transform: rotate(-90deg); animation: rotate 1.5s linear infinite alternate; -webkit-animation: rotate 1.5s linear infinite alternate;} body{ overflow: hidden; }}

/* ================= 适配层 ================= */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }