@charset "GBK";

/* 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-family: '\82F9\65B9','\5FAE\8F6F\96C5\9ED1',"Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#edf0f0;}
a{text-decoration:none;}
ul,li{list-style:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
em,i{font-style:normal;}
b{font-weight:normal;}
/* reset end */
html {
    font-size: 50px;/* 兼容不支持vw的系统 */
    font-size: 13.33333333vw;/* 7.5rem === 100vw */
}
@media (max-width: 1024px) {
    html,body {
        max-width: 1024px;
    }
}
/* hid */
.hid{text-indent:-999em;font-size:0;overflow:hidden;width:0;height:0;display:block}
/* foot */
#afooter{text-align:center;font-size:.22rem;line-height:1.5;padding:.2rem 0;background-color:#000;}
#afooter,#afooter a{color:#c0c0c0;text-decoration:none;}

/* spr */
.sec-title span::before,.sec-title span::after,
.spr{display:block; width:0; height:0; background:url(//game.gtimg.cn/images/lol/act/a20200507special/spr-skin.png) no-repeat; background-size:5rem 4rem;}

/* basic */
.main-wrapper{width:100%;}

/* KV */
.key-vision{position:relative; height:3.86rem; padding-top:0.3rem; background:#fff;}
.kv-title{color:#333; font-size:0.48rem; line-height:1rem; font-weight:bold; padding:0.22rem 0 0 0.3rem;}
.kv-sub-title{color:#626c6d; font-size:0.28rem; line-height:0.54rem; font-weight:normal; padding:0 0 0.22rem 0.3rem;}
.kv-swiper{width:100%; height:3.7rem; position:relative;}
.kv-swiper .swiper-container{width:100%; height:3.38rem;}
.kv-swiper .swiper-slide{width:6rem; height:3.38rem; position:relative;}
.kv-swiper .swiper-slide img{width:100%; height:auto;}
.kv-swiper .swiper-slide .img-mask{width:100%; height:100%; background-image:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)); opacity:0.3; position:absolute; top:0; left:0;}
.kv-swiper .swiper-slide .icon-play{width:1.5rem; height:1.5rem; background-position:-0.02rem -0.02rem; position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0);}
.kv-swiper .swiper-slide span{color:#fefefe; font-size:0.32rem; line-height:1.2; position:absolute; bottom:0.24rem; left:0.14rem;}
.kv-swiper .swiper-pagination{width:100%; position:absolute; bottom:0; left:0; font-size:0; line-height:0;}
.kv-swiper .swiper-pagination-bullet{width:0.16rem; height:0.04rem; border-radius:0.02rem; background:#ededed; opacity:1; margin:0 0.02rem;}
.kv-swiper .swiper-pagination-bullet-active{background:#030303; opacity:1;}

/* Nav */
.nav{position:-webkit-sticky;position:sticky; top:-1px; z-index:10; border-bottom:1px solid #edf0f0; width:100%; height:1.06rem; background:#fff; overflow:hidden; overflow-x:auto;}
.nav ul{font-size:0; line-height:0; white-space:nowrap;}
.nav li{display:inline-block; vertical-align:0; padding:0 0.24rem; font-size:0.28rem; color:#707a7b; line-height:1.06rem; position:relative; transition:color 0.3s ease-in-out;}
.nav li:first-child{padding-left:0.3rem;}
.nav li:last-child{padding-right:0.3rem;}
.nav li a{color:#707a7b;}
.nav li.on a{color:#171717; font-weight:bold;}
.nav li::after{content:''; display:block; width:0; height:0.04rem; background:#191919; border-radius:0.02rem; position:absolute; bottom:0.2rem; left:0.24rem; transition:width 0.3s ease-in-out;}
.nav li:first-child::after{left:0.3rem;}
.nav li.on::after{width:0.3rem;}

/* Section */
.sec{background:#fff; width:6.9rem; margin-bottom:0.16rem; padding:0.4rem 0.3rem 0;}
.sec:last-child{margin-bottom:0;}
.sec-title{color:#171717; font-size:0.32rem; line-height:1.2; text-align:center; width:6.9rem; overflow:hidden; white-space:nowrap; margin:0 auto 0.36rem;}
.sec-title span{display:block; width:300%; margin-left:-100%; text-align:center;}
.sec-title span::before,.sec-title span::after{content:''; display:inline-block; vertical-align:0.04rem; width:2.69rem; height:0.14rem;}
.sec-title span::before{background-position:-0.02rem -2rem; margin-right:0.12rem;}
.sec-title span::after{background-position:-0.02rem -2.4rem; margin-left:0.12rem;}

/* ssv-videos */
.ssv-videos{font-size:0; line-height:0;}
/* video-link */
.video-link{display:inline-block; vertical-align:top; width:3.38rem; height:3.32rem;}
.video-link:nth-child(2n){margin-left:0.14rem;}
.vid-img{display:block; width:100%; height:1.9rem; margin-bottom:0.2rem; border-radius:0.04rem; overflow:hidden; position:relative;}
.vid-img img{width:100%; height:auto;}
.vid-img .vid-mask{display:block; width:100%; height:50%; position:absolute; bottom:0; left:0; background:linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0)); opacity:0.5;}
.vid-img .icon-play{width:0.64rem; height:0.56rem; background-position:-1.8rem -0.02rem; position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0);}
.vid-img em{color:#fff; font-size:0.2rem; line-height:1.2; position:absolute; bottom:0.14rem; right:0.12rem;}
.vid-tit{color:#000; font-size:0.24rem; line-height:0.34rem; width:100%; height:0.68rem; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}

/* view-more */
.view-more{width:7.5rem; height:1.08rem; border-top:1px solid #edf0f0; transform:translate3d(-0.3rem,0,0);}
.btn-more,.view-more span,.btn-more-close{display:block; width:100%; height:100%; color:#1f1f1f; font-size:0.28rem; line-height:1.08rem; text-align:center;}
.icon-down{display:inline-block; vertical-align:-0.16rem; width:0.5rem; height:0.5rem; background-position:0 -3rem; margin-left:-0.06rem;}
.icon-up{display:inline-block; vertical-align:-0.16rem; width:0.5rem; height:0.5rem; background-position:0 -3.5rem; margin-left:-0.06rem;}
.btn-more-close .icon-down{transform-origin:center center; transform:rotate(180deg);}

/* skin-story */
.skin-story{height:11.5rem; overflow:hidden; position:relative;}
.skin-story.open{height:auto;}
.ss-container{font-size:0; line-height:0; text-align:center; color:#34474b; font-size:0.24rem; line-height:0.4rem; text-align:left;}
.skin-story.open .ss-container{padding-bottom:1.8rem;}
.ss-container p{margin-bottom:0.3rem;}
.ss-container p:last-child{margin-bottom:0; padding-bottom:0.5rem}
.ss-container img{width:auto; max-width:6.9rem;}
.ss-container p{color:#34474b; font-size:0.24rem; line-height:0.4rem; text-align:left;}
.ss-container b{color:#1c1c1c; font-size:0.32rem; line-height:1.2; font-weight:bold;}
.view-whole-story{width:100%; height:1.4rem; position:absolute; bottom:0; left:0;}
.white-mask{width:100%; height:2.5rem; background-image:linear-gradient(0deg, rgba(255,255,255,1) 55%, rgba(255,255,255,0)); position:absolute; bottom:0; left:0;}
.skin-story.open .white-mask{display:none;}
.btn-view-whole{display:block; width:5.36rem; height:0.96rem; border:0.02rem solid #000; border-radius:0.04rem; margin:0 auto; text-align:center; position:relative;}
.btn-view-whole span{display:block; color:#0f0f0f; font-size:0.28rem; line-height:0.96rem;}
.btn-view-whole span:last-child{display:none;}
.skin-story.open .btn-view-whole span:first-child{display:none;}
.skin-story.open .btn-view-whole span:last-child{display:block;}

/* skin-painting */
.sp-container{padding-bottom:0.24rem; overflow:hidden;}
.sp-wrap{padding-bottom:0.34rem; line-height:0; text-align:center;}
.sp-wrap img{width:auto; max-width:6.9rem; padding-bottom:0.16rem;}
.sp-wrap p{color:#757e7f; font-size:0.24rem; line-height:1.5; text-align:center;}

/* skin-qa */
.skin-qa{padding-bottom:0.4rem;}
.sqa-wrap{display:block; width:6.4rem; padding:0.24rem 0.25rem; margin-bottom:0.2rem; border-radius:0.04rem; background:#fff; box-shadow:0 0.02rem 0.13rem 0 rgba(0,0,0,0.11);}
.sqa-ques{color:#1c1c1c; font-size:0.26rem; line-height:0.34rem; font-weight:bold; padding-bottom:0.2rem; border-bottom:1px solid #edf0f0;}
.icon-q{display:inline-block; vertical-align:-0.16rem; width:0.5rem; height:0.5rem; background-position:-1rem -3rem; margin:0 0.1rem 0 -0.08rem;}
.sqa-answ .respondent{padding:0.2rem 0 0.14rem; display:flex; align-items:center;}
.sqa-answ .respondent img{width:0.64rem; height:0.64rem; box-sizing:border-box; border-radius:0.32rem; border:1px solid #d7d7d7; margin-right:0.18rem;}
.sqa-answ .respondent span{color:#757e7f; font-size:0.2rem;}
.sqa-answ .answer p{color:#34474b; font-size:0.24rem; line-height:0.4rem;}
.more-dynamic{color:#757e7f; font-size:0.24rem; line-height:0.64rem; text-align:center; margin-bottom:0.1rem}
.btn-more-dynamic{display:block; margin:0 auto; width:1.2rem; height:0.56rem; background:#292929; border-radius:0.04rem; color:#fff; font-size:0.24rem; line-height:0.56rem; text-align:center; box-shadow:0 -0.04rem 0.1rem rgba(0,0,0,0.2),-0.04rem 0 0.1rem rgba(0,0,0,0.2),0 0.04rem 0.1rem rgba(0,0,0,0.2),0.04rem 0 0.1rem rgba(0,0,0,0.2);}
.btn-more-dynamic:active{background:#fdfdfd; color:#000;}

/* skin-buy */
.skin-buy{overflow:hidden;}
.btn-skb-buy{display:inline-block; vertical-align:top; width:3.35rem; height:3.35rem; margin-bottom:0.2rem; background:#e7e7e7; border-radius:0.04rem; overflow:hidden; position:relative;}
.icon-no-more{display:block; width:0.58rem; height:0.52rem; background-position:-1.8rem -0.8rem; margin:1.26rem auto 0.16rem}
.btn-skb-buy.no-more em{color:#707a7b; font-size:0.2rem; line-height:1.5; display:block; width:100%; text-align:center;}
.singlegift{ width: 100%; height: auto; margin-bottom: 0.4rem; display: flex;justify-content: space-between; flex-wrap:wrap;}
.singlegift .btn-buy{  width: 3.35rem; height: 3.35rem; border-radius: 0.05rem; display: block; position: relative; overflow: hidden; margin-bottom:0.2rem;}
.singlegift .btn-buy .pic{ width: 3.35rem; height: 3.35rem; object-fit: cover; background-size: 100%; position:absolute; top: 0rem;left: 0rem;border-radius: 0.05rem;}
.singlegift .type{ background: url(//game.gtimg.cn/images/lol/act/a20200507special/spr-hero.png) no-repeat; background-size: 5rem 4rem; position: absolute; font-size: 0.2rem; color: #ffffff;}
.singlegift .hero{ width: 0.51rem; height: 0.38rem; background-position: -4.14rem -0.02rem; top: 0rem; right: 0.05rem; line-height: 0.38rem; text-align: center;}
.singlegift .skin{width: 0.51rem; height: 0.38rem; background-position: -2.8rem -0.02rem; top: 0rem; right: 0.05rem; line-height: 0.38rem; text-align: center;}
.singlegift .name{ width: 100%; text-align: center; font-size: 0.24rem; color: #ffffff; position: absolute; top: 2.5rem; left: 0rem;}
.singlegift .pricebox{ width: 100%; display:flex; justify-content: center; margin-left: 0.05rem; font-size: 0.2rem; color: #ffffff; position: absolute; top: 2.9rem; left: 0rem;}
.singlegift .pricebox .count::before{ content: ''; background: url(//game.gtimg.cn/images/lol/act/a20200507special/spr-hero.png) no-repeat; width: 0.18rem; height: 0.17rem; background-size: 5rem 4rem; background-position: -2.80rem -0.69rem; vertical-align: inherit; display: inline-block; vertical-align:top; margin-right: 0.05rem;}
.singlegift .pricebox .bluecount::before{ content: ''; background: url(//game.gtimg.cn/images/lol/act/a20200507special/spr-hero.png) no-repeat; width: 0.14rem; height: 0.22rem; background-size: 5rem 4rem; background-position: -3.08rem -0.69rem; vertical-align: middle; display: inline-block; vertical-align:top; margin-right: 0.05rem;}
.singlegift .pricebox p{ margin-right: 0.1rem;}
.giftbox{ width: 100%; height: auto;}
.giftbox .btn-buy{ width: 6.89rem; height: 4.82rem; display: block; background: #f0f0f0; position: relative;}
.giftbox .giftpic{width: 6.89rem; height:3.35rem; object-fit: cover; display: block; margin: 0 auto; background-size: 100% 100%;}
.giftbox .time,.giftbox .txt{ font-size: 0.2rem; color: #2a2a2a;margin-left: 0.2rem; line-height: 0.4rem;}
.giftbox .time{ margin-top: 0.3rem;}
.giftbox .gift{ background: url(//game.gtimg.cn/images/lol/act/a20200507special/spr-hero.png) no-repeat; background-size: 5rem 4rem; position: absolute; font-size: 0.2rem; color: #ffffff; width: 0.51rem; height: 0.38rem; background-position: -3.5rem -0.02rem; top: 0rem; right: 0.05rem; line-height: 0.38rem; text-align: center;}
.giftbox .name{ width: 100%; text-align: center; font-size: 0.24rem; color: #ffffff; position: absolute; top: 2.5rem; left: 0rem;}
.giftbox .pricebox{ width: 100%; display:flex; justify-content: center; margin-left: 0.05rem; font-size: 0.2rem; color: #ffffff; position: absolute; top: 2.9rem; left: 0rem;}
.giftbox .pricebox .count::before{ content: ''; background: url(//game.gtimg.cn/images/lol/act/a20200507special/spr-hero.png) no-repeat; width: 0.18rem; height: 0.17rem; background-size: 5rem 4rem; background-position: -2.80rem -0.69rem; vertical-align: inherit; display: inline-block; vertical-align:top; margin-right: 0.05rem;}
.giftbox .pricebox p{ margin-right: 0.1rem;}

/* imgGallery */
.img-gallery{width:100vw; height:100vh; position:fixed; top:0; left:0; z-index:999; background:rgba(0,0,0,0.9);}
.for-scale{position:absolute; width:100%; height:auto;}
.show-alt{position:absolute; width:80%; padding:0 10% 0.2rem; bottom:0; left:0; color:#fff; font-size:0.28rem; line-height:1.6; text-align:center;}
.btn-close-gallery{width:0.6rem; height:0.6rem; position:absolute; top:0.1rem; right:0.1rem; background-size:100% 100%; background-repeat:no-repeat; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY1QTYyRDM5OTRFQzExRUE4QkI1OUUwQTlFQjhENzZGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjY1QTYyRDNBOTRFQzExRUE4QkI1OUUwQTlFQjhENzZGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjVBNjJEMzc5NEVDMTFFQThCQjU5RTBBOUVCOEQ3NkYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjVBNjJEMzg5NEVDMTFFQThCQjU5RTBBOUVCOEQ3NkYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7AYTTtAAADK0lEQVR42uzdzU7cMBAH8KzFrWfgAfogywP0NUjKuQ+zpe/W9swdOOI6qleK0GqVxDOe/3yMNIJTsP3TrrDHjg855yECJ1IMQYBEBEiARARIgEQESIBEKAe5dTiGd6ggx5J/Sz46whhL/ql9p4l56YQgjyXf8v/4KDkSPRc5x9rXXPt+pHguNUZ2grLEyJQoHBjWUS5hkKG0NOzhCoZVlGsYS5SH3iBrMKyhrMFoRuHGsIKyBaMJpQeGdpQ9GLtRemFoRWnB2IVyWFnCvS/5u+QXiqlPye8lfymY9P0seSB41lvJryVfqGbq84N+1MFsjUPt6OgEI9exe+GYqU8EH2H0r6+RuI8T939ZllFEMVrmIRZRxDFaZ+qWUCAwKNayLKDAYFCt9mpGgcKgAtGKAodBCaINBRKDGkQLCiwGBwg6CjQGFwgqCjwGJwgaigoMbhAUFDUYPUCkUVRh9AKRQlGH0ROkN4pKjN4gvVDUYkiAcKOoxpjzRqA8+lx/nghKpOdy8Dkoy65Pi7Z2i7WbHDhiIkIZFrV+1Rhz3AhuJKD+pAzaMRBOUD3XAUB4nYQ4BsqRNgQUCAykM4aSKDAYSCBSKFAYaCC9UeAwEEF6oUBioIJwo8BiIINwoUBjoIMMjJ+QIUC2B+WRgOWMHvooRHKE8RllChB5jCXKCRElOcSARklOMWBRkmMMSJTkHAMOJQUGFkoygpEHuiPboijJCMbTQLfMIooiUVOn3tzweW2KqkZ/qr/3XfdSvidrEvobsZV040BNsZUUB0M1ilUMtSiWMVSiWMdQh+IBQxWKFww1KJ4wVLTRGwZ8Wz1iQLfZKwZs2z1jQPbBOwZcXwIDrE+BAda3wADrY2CA9VXqZfzQRwIYSs0sL+P/VvLdCca5lk6xceK9jh3Ly/hbL3RB/pri+PpivdCl9cojjRgtKF2uPNp7KZhmjD0oXS8F23ptngWMLSgi1+atQbGGsQalCYNqtfcSilWMayjNGJT1kCWKdYxLKCQY1BXDuUGvTjCWKK9UGFtm6mvjfvUEyE6Q9lnyFX8RwGcMIwIkQCICJEAiAiRAIgLET/wTYABHqPLglHPlmAAAAABJRU5ErkJggg==');}

/* 新内容模块 */
.hot-info-list{width:7.5rem; padding-top:0.3rem; margin-left:-0.3rem; overflow:hidden; font-size:0; line-height:0;}
.hot-info-list .vid-img{height:1.89rem;}
.hot-info-list .video-link:nth-child(2n-1){margin-left:0.3rem;}
.sec-content{display: block; width: fit-content;overflow: hidden;position: relative;}
.sec-cont-no{margin:0 0 .64rem 0.3rem;}
.sec-cont-img,.sec-cont-imgs{margin-bottom: .55rem;}
.sec-cont-video{margin-bottom: .6rem;}
.sec-cont-img,.sec-cont-video{width: 7.2rem;height: 1.63rem;padding-top: .08rem;margin-left: 0.3rem;box-sizing: border-box;overflow: visible;}
.sec-cont-img img{width:100%; height:100%; object-fit:cover;}
.sec-cont-img .img-box,.sec-cont-video .video-box{width: 2.92rem;height: 1.63rem; position: absolute;right: 0;top: 0;}
.sec-cont-video .video-box .vid-img{height:100%;}
.sec-headline{width: 3.85rem;height: .84rem;line-height: .42rem;margin-bottom: .35rem; overflow: hidden;font-size: .32rem;color: #171717;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sec-cont-no .sec-headline{width: 6.9rem;height: auto;max-height: .84rem;-webkit-line-clamp:2;margin-bottom: .45rem;}
.sec-state{width: 4.2rem;color: #8f9da8;font-size: 0}
.sec-cont-no .sec-state{width: auto;}
.sec-state span{margin-right: .3rem;font-size: .22rem;line-height: .24rem; }
.sec-state .view{width: fit-content;height: .24rem;display: inline-block; vertical-align:top; position: relative; padding-left: .35rem;}
.sec-state .view:before{content: '';width: 0.25rem;height: 0.18rem;position: absolute;top: .03rem;left: 0;background:url(//game.gtimg.cn/images/lol/act/a20200507special/spr-match.png) no-repeat; background-size:2.77rem 1.93rem; background-position: -.25rem -.14rem;}
.sec-state .comment{width: fit-content;height: .24rem;display: inline-block; vertical-align:top; position: relative; padding-left: .32rem;}
.sec-state .comment:before{content: '';width: 0.22rem;height: 0.2rem;position: absolute;top: .02rem;left: 0;background:url(//game.gtimg.cn/images/lol/act/a20200507special/spr-match.png) no-repeat; background-size:2.77rem 1.93rem; background-position: -.64rem -.14rem;}
.sec-cont-imgs{width: 7.2rem;padding-left:0.3rem;overflow: visible;margin-left: 0;}
.sec-cont-imgs .sec-headline{width: 6.9rem;height: auto;max-height: .84rem;-webkit-line-clamp:2;margin:  0 0 .25rem 0;}
.sec-cont-imgs .sec-state{margin:.15rem 0 0 0;}
.sec-cont-imgs .img-box{width: 7.5rem;height: 1.37rem;margin-bottom: .1rem;margin-left:-0.3rem;overflow: hidden;overflow-x: auto;white-space:nowrap;font-size: 0}
.sec-cont-imgs .img-box img{width: auto;height: 1.37rem;display: inline-block; vertical-align:top; margin-right: .08rem;}

/* pic-nav */
.pic-nav{width:100%;background:#fff;padding:0.1rem 0; overflow:hidden;}
.pic-nav ul{width: 7.2rem;font-size:0; line-height:0;overflow: hidden;}
.pic-nav li{display:inline-block; vertical-align:0; padding:0 0.23rem;height: .48rem;margin: 0 .07rem .2rem; font-size:0.28rem; color:#707a7b; line-height:.48rem;border: 1px solid #8a8a8a;border-radius: .03rem; position:relative; transition:color 0.3s ease-in-out;}
.pic-nav li.on{color:#080808; font-weight:bold;border: 1px solid #080808;}
.pic-nav li a{color:#707a7b;}
.pic-nav li.on a{color:#080808;}/* #t6Hl8#E5583909F75B079AB898A3FFE5AC6581 */