/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单，根据需要选择是否删除 */}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
/* reset end */
html {
  font-size: 50px;/* 兼容不支持vw的系统 */
  font-size: 13.33333333vw;/* 7.5rem === 100vw */
}

@media (max-width: 1024px) {
  html,body {
    max-width: 1024px;
  }
}

#afooter{background-color: #000;text-align: center;font-size:.22rem;padding:.2rem 0;}
#afooter, #afooter a{color: #fff;text-decoration: none;}
/*视频弹窗*/
.pop_video { padding: 2px; outline: none; position: relative; display: none; border: 1px solid #d1cdce;}
.pop_video_close { position: absolute; right: .06rem; top: -.7rem; z-index: 5;}
.pop_video_cont { width: 6.6rem; height: 3.72rem; border: 1px solid #d1cdce; text-align: center; clear: both; background: #000;}
#popVideoCon { width: 100%; height: 100%;}
/* 图片分离路径示例 */
/* .bg{background-image: url(//game.gtimg.cn/images/lol/act/a20221028arcane/);} */


.spr { background-image: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/spr.png); background-repeat: no-repeat; background-size: 5.12rem 13.19rem; }

.spr.btn-list-mode { width:0.32rem; height:0.17rem; background-position:96.45833% 41.39785%; }
.spr.btn-nextMus { width:0.22rem; height:0.18rem; background-position:94.4898% 48.1937%; }
.spr.btn-pauseMus { width:0.75rem; height:0.76rem; background-position:76.43021% 99.19549%; }
.spr.btn-playMus { width:0.75rem; height:0.76rem; background-position:95.88101% 99.19549%; }
.spr.btn-prevMus { width:0.22rem; height:0.18rem; background-position:94.4898% 50.34589%; }
.spr.btn-single-mode { width:0.32rem; height:0.17rem; background-position:96.45833% 43.47158%; }
.spr.mus-app-title { width:2.71rem; height:0.28rem; background-position:4.14938% 71.34005%; }
.spr.mus-app1 { width:1.51rem; height:0.48rem; background-position:2.77008% 97.4823%; }
.spr.mus-app2 { width:1.52rem; height:0.5rem; background-position:2.77778% 92.9078%; }
.spr.mus-app3 { width:1.52rem; height:0.5rem; background-position:47.77778% 94.64145%; }
.spr.music-icon { width:0.14rem; height:0.23rem; background-position:92.97189% 52.70062%; }
.spr.part1-btn-go { width:1.39rem; height:0.42rem; background-position:95.44236% 56.14722%; }
.spr.part1-icon { width:0.33rem; height:0.25rem; background-position:96.65971% 38.949%; }
.spr.part1-li1 { width:3.32rem; height:0.92rem; background-position:5.55556% 66.74817%; }
.spr.part1-li2 { width:3.36rem; height:0.92rem; background-position:5.68182% 58.43521%; }
.spr.part1-video-btn { width:0.65rem; height:0.66rem; background-position:95.97315% 84.35754%; }
.spr.part2-btn1 { width:1.26rem; height:0.4rem; background-position:92.22798% 88.58483%; }
.spr.part2-btn2 { width:1.26rem; height:0.4rem; background-position:92.22798% 92.49414%; }
.spr.part2-btn3 { width:1.27rem; height:0.4rem; background-position:91.42857% 68.10008%; }
.spr.part2-btn4 { width:1.28rem; height:0.41rem; background-position:92.70833% 60.17214%; }
.spr.part2-text1 { width:1.69rem; height:0.92rem; background-position:2.91545% 87.77506%; }
.spr.part2-text2 { width:2.16rem; height:1.08rem; background-position:3.37838% 79.19075%; }
.spr.part2-text3 { width:2.16rem; height:0.88rem; background-position:79.72973% 77.90414%; }
.spr.part2-text4 { width:1.57rem; height:0.85rem; background-position:53.23944% 89.62723%; }
.spr.part5-btn { width:1.28rem; height:0.41rem; background-position:91.66667% 64.16275%; }
.spr.part5-time { width:2.09rem; height:0.28rem; background-position:96.0396% 71.34005%; }
.spr.pop-qrcode-close { width:0.4rem; height:0.39rem; background-position:97.88136% 74.92187%; }
.spr.pop-qrcode { width:4.82rem; height:4.84rem; background-position:33.33333% 1.1976%; }
.spr.pop-zm-btn { width:1.83rem; height:0.39rem; background-position:71.73252% 82.57812%; }
.spr.pop-zm { width:4.43rem; height:2.03rem; background-position:14.49275% 45.16129%; }
.spr.vol-icon { width:0.24rem; height:0.24rem; background-position:94.87705% 45.79151%; }

.main { width: 100%; margin: 0 auto; position: relative;}
.header { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/bg1.jpg) no-repeat center top; background-size: 100% 100%; width: 100%; height: 11.34rem;}
.part1 { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/bg2.jpg) no-repeat center top; background-size: 100% 100%; width: 100%; height: 8.71rem; position: relative; z-index: 2;}
.part2 { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/bg3.jpg) no-repeat center top; background-size: 100% 100%; width: 100%; height: 11.97rem; position: relative; z-index: 1;}
.part3 { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/bg4.jpg) no-repeat center top; background-size: 100% 100%; width: 100%; height: 13.6rem; position: relative; z-index: 1;}
.part4 { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/bg5.jpg) no-repeat center top; background-size: 100% 100%; width: 100%; height: 5.91rem; position: relative;}
.part5 { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/bg6.jpg) no-repeat center top; background-size: 100% 100%; width: 100%; height: 6.36rem; margin-top: -1px; position: relative; z-index: 1;}


.logo { display: none; background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/logo.png) no-repeat 0 0; width: 168px; height: 62px; position: absolute; left: 58px; top: 45px; z-index: 5;}
.header-nav { display: none;}
.pc-cont { display: none !important;}

.part1-title { padding-top: 2.48rem; width: 7rem; margin-left: .33rem; margin-bottom: .12rem;}
.part1-title h5 { line-height: .34rem; color: #35cbb4; margin-bottom: .08rem; font-size: .27rem; padding-left: .4rem; position: relative;}
.part1-title h5 em { position: absolute; left: 0; top: 0;}
.part1-title p { width: 6.34rem; color: #e6e6e6; font-size: .16rem; line-height: .18rem; padding-left: .46rem;}
.part1-video-box { width: 6.83rem; height: 3.33rem; background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/part1-video-box.png) no-repeat 0 0; background-size: 100% 100%; margin: 0 auto .14rem; position: relative;}
.part1video { display: none; width: 6.78rem; height: 3.29rem; background-color: #000; margin: 0 auto 0 .03rem; position: relative; z-index: 1; top: .02rem;}
.part1-video-layer { width: 100%; height: 100%; position: absolute; z-index: 2; left: 0; top: 0; cursor: pointer;}
.part1-video-btn { position: absolute; top: 50%; left: 50%; margin: -.33rem 0 0 -.33rem; z-index: 2;}
.part1-links { width: 100%; height: auto; font-size: 0; text-align: center; overflow: hidden;}
.part1-links li { display: inline-block; vertical-align: top;margin: 0 7px;}
.part1-links li p { padding-top: .1rem; line-height: .28rem; color: #dceded; font-size: .15rem;}
.part1-links li a { display: block; margin: .02rem auto 0;}

.part2 ul { padding: 2.37rem 0 0 .3rem; width: 6.9rem;}
.part2 li { width: 100%; height: 1.58rem; position: relative;}
.part2 li.part2-li1 { height: 2.33rem;}
.part2 li.part2-li2 { height: 2.33rem;}
.part2 li.part2-li3 { height: 2.33rem;}
.part2 li.part2-li4 { height: 2.33rem;}
.part2 li a { position: absolute; z-index: 3; top: .84rem; left: .34rem; font-size: .2rem; line-height: .4rem; text-align: center; color: #fff;}
.part2-text { float: right; position: relative; z-index: 2; margin: .28rem .22rem 0 auto; text-align: center; color: #fff2fb;}
.part2 li.part2-li1 .part2-text { margin-top: .34rem;}
.part2 li.part2-li2 .part2-text { margin-top: .24rem;}
.part2 li.part2-li3 .part2-text { margin-top: .36rem;}
.part2 li.part2-li4 .part2-text { margin-top: .42rem;}
.part2-text h5 { font-size: .21rem; line-height: .3rem; margin-top: .1rem; margin-bottom: .02rem;}
.part2-text p { font-size: .18rem; line-height: .2rem;}
.part2-text1 h5 { -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(#fc8afa 40%,#ed73dd 80%);}
.part2-text2 h5 { -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(#ffd2e5 40%,#ff6bab 80%); margin-top: .08rem; margin-bottom: .02rem;}
.part2-text3 h5 { -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(#f7e9cf 40%,#ffdb9e 80%); font-size: .2rem; width: 140%; margin-left: -20%; transform: scale(.8); margin-bottom: .02rem; margin-top: .12rem;}
.part2-text4 h5 { -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(#e4f9fa 40%,#69dbe2 80%); font-size: .2rem; width: 140%; margin-left: -20%; transform: scale(.8); margin-bottom: .02rem; margin-top: .12rem;}
.part2-text2 p { font-size: .2rem; line-height: .22rem;}
.part2-text3 p { font-size: .2rem; line-height: .22rem;}
.part2-text p.part2-p1 { font-size: .2rem; line-height: .2rem; color: #ffb3d3; transform: scale(.7);}
.part2-text p.part2-p2 { font-size: .2rem; line-height: .2rem; color: #fff2fb; transform: scale(.6);}
.part2-text p.part2-p3 { font-size: .2rem; line-height: .18rem; color: #fff2fb;}
.part2-text p.part2-p4 { margin-top: 0;}
.part2-text p.part2-p5 { font-size: .2rem; line-height: .22rem; color: #fff4e1;}
.part2-text p.part2-p6 { font-size: .2rem; line-height: .22rem; color: #fff2fb;}
.part2-text2 p { width: 180%; margin-left: -40%; transform: scale(.7); transform-origin: center top; margin-top: -.02rem;}
.part2-text3 p { width: 180%; margin-left: -40%; transform: scale(.7); transform-origin: center top; line-height: .24rem;}
.part2-text4 p { width: 180%; margin-left: -40%; transform: scale(.7); transform-origin: center top; line-height: .24rem;}
.part2-li-cont { position: absolute; z-index: 1; left: 0; width: 6.88rem;}
.part2-li1-cont { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/part2-li1-cont.png) no-repeat 0 0; background-size: 100% 100%; height: 2.1rem; top: -.49rem;}
.part2-li2-cont { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/part2-li2-cont.png) no-repeat 0 0; background-size: 100% 100%; height: 2.51rem; top: -.91rem;}
.part2-li3-cont { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/part2-li3-cont.png) no-repeat 0 0; background-size: 100% 100%; height: 2.2rem; top: -.59rem;}
.part2-li4-cont { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/part2-li4-cont.png) no-repeat 0 0; background-size: 100% 100%; height: 1.92rem; top: -.31rem;}

.part3 .main { padding-top: 3.54rem; height: 8.28rem;}
.left-wrap { width: 4.95rem; height: 3.32rem; padding-top: 4.2rem; margin-left: 1.42rem;}
.left-wrap ul { width: 4.95rem; height: 3.32rem; overflow-y: auto; transition: all 0.3s;}
.left-wrap ul::-webkit-scrollbar {
    width: 2px;
    background-color: #fff;
}
.left-wrap ul::-webkit-scrollbar-thumb {
    background-color: #9e4793;
}
.left-wrap li { width: 4.76rem; height: auto; overflow: hidden; padding: .24rem 0; border-bottom: 1px solid #a7abb9; color: #fff; font-size: .22rem; line-height: .3rem; min-height: .3rem;}
.left-wrap li a { color: #fff;}
.left-wrap .mname { float: left; width: 4rem;}
.left-wrap .length { float: right;}
.left-wrap li.on { border-color: #607286;}
.left-wrap li.on a { color: #43d2d9;}
.music-icon { display: none; float: left; position: relative; top: .04rem; margin-right: .02rem;}
.left-wrap li.on .music-icon { display: block;}
.center-wrap { position: absolute; width: 4.84rem; left: 50%; margin-left: -2.42rem; top: 5.5rem;}
.mus-tit { width: 100%; line-height: .34rem; color: #38b0b6; font-size: .2rem;}
.center-wrap .song { width: 110%; color: #d7539e; line-height: .42rem; font-size: .28rem; font-weight: bold;}
.center-wrap .progress-label { margin-top: .5rem; width: 4.84rem; height: .02rem; cursor: pointer; display: flex; align-items: center;}
.center-wrap .track { width: 4.84rem; height: .05rem; background-color: #cdc8d2;}
.center-wrap .progress { width: 0%; height: 100%; background-color: #4cc4cc; position: relative; left: 0px; top: 0px;}
#progressDot { display: block; content: ''; width: .16rem; height: .16rem; position: absolute; top: 50%; right: 0px; background-color: #4cc4cc; transform: translate(50%, -50%); border-radius: 50%;}
.center-wrap .bottom { width: 4.84rem; line-height: 20px; margin-top: 12px;}
.center-wrap .time-wrap { float: left; color: #4ff6ff; font-size: .22rem; margin-left: 0;}
.center-wrap .r-wraper { float: right; width: 2rem; position: relative;}
.mode-con { position: absolute; width: .32rem; height: .17rem; left: 0; top: .04rem;}
.mode-con a { display: block;}
.mode-con a.btn-single-mode { display: none;}
.volume-con { width: 1.36rem; margin: 0 0 0 auto;}
.vol-icon { display: block; float: left;}
.part3 .voice-label { width: 1rem; display: flex; align-items: center; cursor: pointer; position: relative; left: 0px; height: 0px; float: right; margin-top: .12rem;}
.part3 .voice-inner { width: 1rem; height: .053rem; background-color: #cdc8d2; border-radius: .05rem;}
.part3 .voice-progress { width: 50%; height: 100%; background-color: #4cc4cc; position: relative; left: 0px; top: 0px;}
.part3 .voice-progress::after { display: block; content: ''; width: .14rem; height: .14rem; position: absolute; top: 50%; right: 0px; background-color: #4cc4cc; transform: translate(50%, -50%); border-radius: 50%;}
.part3 .voice-control { width: 100%; cursor: pointer; position: absolute; left: 0px; height: 0px; z-index: 9; opacity: 0;}
.right-wrap { position: absolute; width: 2.44rem; height: 2.44rem; left: 50%; top: 2.36rem; margin-left: -1.22rem;}
.plate-box { width: 100%; height: 100%; position: relative; z-index: 2;}
.cover { width: 100%; height: 100%; border: .02rem solid #d973b2; border-radius: 50%; overflow: hidden; animation: 8s linear infinite; -webkit-animation: 8s linear infinite; animation-name: rotation; animation-play-state: paused;}
@keyframes rotation {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(1px);
        transform: rotateZ(360deg);
    }
}
#coverImg { width: 100%; height: 100%; transition:all 0.3s; background-size: 100% 100%; border-radius: 50%;}
#coverImg:after { content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); left: 0; top: 0; display: block;}
.btn-list { position: absolute; z-index: 4; top: .86rem; left: 0; width: 100%; height: 75px;}
.btn-prevMus { display: block; position: absolute; left: .36rem; top: .3rem;}
.btn-nextMus { display: block; position: absolute; right: .36rem; top: .3rem;}
.btn-pausePlay { margin: 0 auto; width: .76rem; height: .75rem;}
.btn-pausePlay a { display: block;}
.btn-pausePlay a.btn-pauseMus { display: none;}
.part3-more { width: 100%; margin: .2rem auto 0; height: 48px; font-size: 0; text-align: center;}
.mus-app-title { display: block; margin: 0 auto;}
.part3-more a { display: inline-block; vertical-align: top; margin: .2rem auto 0; pointer-events: none;}
.part4-text { color: #fff; font-size: 24px; line-height: 30px; position: absolute; right: 62px; top: 488px; text-align: right;}
.part4-text span { color: #4dafaa;}
.part4-text { color: #fff; font-size: .16rem; line-height: .22rem; position: absolute; right: .26rem; top: 2.3rem; text-align: right;}
.part4-text span { color: #4dafaa;}
.part5 .main { padding-top: 3.78rem;}
.part5-time { float: left; margin-left: .6rem; margin-right: .84rem; color: #e5e5e5; font-size: .18rem; text-align: center; line-height: .28rem;}
.part5-time span { display: block; width: 200%; margin-left: -50%; transform: scale(.7);}
.part5-text { float: left; width: 3rem; height: 2rem; position: relative;}
.part5-text ul { width: 100%;}
.part5-text li { position: absolute; width: 1.6rem; text-align: center;}
.part5-text li p { width: 100%; text-align: center; color: #fff; font-size: .18rem; line-height: .44rem;}
.part5-text li:nth-child(1) { top: 1.24rem; left: 1.71rem;}
.part5-text li:nth-child(2) { top: 1.24rem; left: 0;}
.part5-text li:nth-child(3) { top: -.45rem; left: 0;}
.part5-text li:nth-child(4) { top: -.45rem; left: 1.71rem;}
.part5-text li.part5-p1 p { width: 180%; margin-left: -40%; font-size: .2rem; line-height: .24rem; transform: scale(.7);}
.part5-btn { position: absolute; top: 4.21rem; left: .6rem; color: #d7fdff; font-size: .21rem; line-height: .4rem; text-align: center;}
/*pop*/
.comm-pop { display: none; position: relative; outline: none;}
.pop-qrcode-close { position: absolute; top: -.42rem; right: -.68rem;}
.pop-qrcode-box { padding-top: .56rem; width: 3.68rem; margin: 0 auto;}
.pop-qrcode-box img { display: block; width: 3.68rem; height: 3.68rem;}
.pop-zm-box { padding-top: .66rem; text-align: center;}
.pop-zm-box p { color: #fff; font-size: .22rem; line-height: .3rem; margin-bottom: .2rem;}
.pop-zm-box a { display: block; margin: 0 auto;}
.zm-mask { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; display: none;}
.wrapper.zm .zm-mask { display: block;}
/*手游*/
.mobile-wrapper .header { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/mob-bg1.jpg) no-repeat 0 0; background-size: 100% 100%; height: 7.04rem;}
.mobile-wrapper .part1 { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/mob-bg2.jpg) no-repeat 0 0; background-size: 100% 100%; height: 7.26rem;}
.mobile-wrapper .part2 { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/mob-bg3.jpg) no-repeat 0 0; background-size: 100% 100%; height: 12.02rem;}
.mobile-wrapper .part4 { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/mob-bg4.jpg) no-repeat 0 0; background-size: 100% 100%; height: 6.12rem;}
.mobile-wrapper .part5 { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/mob-bg5.jpg) no-repeat 0 0; background-size: 100% 100%; height: 6.86rem;}
.mobile-wrapper .part1-links { display: none;}
.mobile-wrapper .part2 li a { display: none;}
.mobile-wrapper .part4-text { top: 2.5rem;}
.mobile-wrapper .part5 .main { padding-top: 4.24rem;}
.mobile-wrapper .part5-btn { display: none;}
.mobile-wrapper .part5-text { position: relative; top: -.12rem;}
.mobile-wrapper .part2-li1-cont { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/mob-part2-li1-cont.png) no-repeat 0 0; background-size: 100% 100%;}
.mobile-wrapper .part2-li2-cont { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/mob-part2-li2-cont.png) no-repeat 0 0; background-size: 100% 100%;}
.mobile-wrapper .part2-li3-cont { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/mob-part2-li3-cont.png) no-repeat 0 0; background-size: 100% 100%;}
.mobile-wrapper .part2-li4-cont { background: url(//game.gtimg.cn/images/lol/act/a20221028arcane/m/mob-part2-li4-cont.png) no-repeat 0 0; background-size: 100% 100%;}