body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:none;}
img{border:0}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0;}
ul {list-style: none;}

body{overflow: hidden; background: #000;user-select: none;}

.spr{ background-image:url(//game.gtimg.cn/images/lol/act/a20230715chromahub/spr.png); background-repeat:no-repeat; background-size:508px 995px;}
.spr.collection-list-icon1{ width:16px; height:16px; background-position:98.47561% 79.9285%;}
.spr.collection-list-icon2{ width:16px; height:16px; background-position:46.23984% 89.32584%;}
.spr.collection-list-line{ width:123px; height:3px; background-position:39.61039% 99.54637%;}
.spr.collection-next-icon:hover{ width:27px; height:45px; background-position:97.60915% 44.68421%;}
.spr.collection-next-icon:active{ width:27px; height:45px; background-position:97.60915% 39.52632%;}
.spr.collection-next-icon{ width:27px; height:45px; background-position:97.60915% 49.84211%;}
.spr.collection-prev-icon:hover{ width:27px; height:45px; background-position:80.76923% 71.84211%;}
.spr.collection-prev-icon:active{ width:27px; height:45px; background-position:97.60915% 55%;}
.spr.collection-prev-icon{ width:27px; height:45px; background-position:80.76923% 77%;}
.spr.comm-back:hover{ width:37px; height:37px; background-position:23.67304% 98.90397%;}
.spr.comm-back:active{ width:37px; height:37px; background-position:42.14437% 64.35282%;}
.spr.comm-back{ width:37px; height:37px; background-position:32.37792% 98.79958%;}
.spr.comm-share:hover{ width:37px; height:37px; background-position:49.78769% 98.6952%;}
.spr.comm-share:active{ width:37px; height:37px; background-position:41.0828% 98.6952%;}
.spr.comm-share{ width:37px; height:37px; background-position:58.49257% 98.6952%;}
.spr.details-btn-gray{ width:137px; height:34px; background-position:98.24798% 0.46826%;}
.spr.details-btn-light:hover{ width:137px; height:34px; background-position:98.24798% 4.42248%;}
.spr.details-btn-light{ width:137px; height:34px; background-position:1.21294% 90.27055%;}
.spr.details-close:hover{ width:32px; height:32px; background-position:83.08824% 8.35929%;}
.spr.details-close:active{ width:32px; height:32px; background-position:75.52521% 8.35929%;}
.spr.details-close{ width:32px; height:32px; background-position:90.65126% 8.35929%;}
.spr.details-icon-date{ width:15px; height:15px; background-position:98.27586% 81.88776%;}
.spr.details-icon-lock{ width:22px; height:33px; background-position:86.31687% 81.34096%;}
.spr.details-next-icon:hover{ width:27px; height:37px; background-position:27.54678% 94.51983%;}
.spr.details-next-icon:active{ width:27px; height:37px; background-position:80.76923% 81.47182%;}
.spr.details-next-icon{ width:27px; height:37px; background-position:77.85863% 93.58038%;}
.spr.details-prev-icon:hover{ width:27px; height:37px; background-position:90.74844% 92.22338%;}
.spr.details-prev-icon:active{ width:27px; height:37px; background-position:84.30353% 92.22338%;}
.spr.details-prev-icon{ width:27px; height:37px; background-position:97.19335% 92.22338%;}
.spr.home-icon-set:hover{ width:37px; height:37px; background-position:67.19745% 97.86013%;}
.spr.home-icon-set:active{ width:37px; height:37px; background-position:62.10191% 93.58038%;}
.spr.home-icon-set{ width:37px; height:37px; background-position:70.80679% 93.58038%;}
.spr.home-info-head-change{ width:43px; height:43px; background-position:42.68817% 54.88445%;}
.spr.home-info-head{ width:146px; height:146px; background-position:65.88398% 79.68198%;}
.spr.home-info-icon{ width:67px; height:67px; background-position:37.30159% 78.82543%;}
.spr.home-info-pers{ width:173px; height:38px; background-position:73.28358% 59.1954%;}
.spr.input-clear{ width:10px; height:10px; background-position:82.02811% 61.77665%;}
.spr.page-colorful-box{ width:160px; height:30px; background-position:70.25862% 63.05699%;}
.spr.page-colorful-btn:hover{ width:102px; height:31px; background-position:68.84236% 89.36722%;}
.spr.page-colorful-btn:active{ width:102px; height:31px; background-position:68.84236% 85.73651%;}
.spr.page-colorful-btn{ width:102px; height:31px; background-position:98.15271% 97.25104%;}
.spr.page-colorful-chose.cur{ width:16px; height:13px; background-position:51.32114% 91.29328%;}
.spr.page-colorful-chose.hover{ width:16px; height:13px; background-position:55.38618% 91.29328%;}

.page-colorful-box-has:hover .spr.page-colorful-chose.cur{ width:16px; height:13px; background-position:55.38618% 91.29328%;}

.spr.page-colorful-chose{ width:16px; height:13px; background-position:50.30488% 89.05295%;}
.spr.page-colorful-head-hover{ width:244px; height:220px; background-position:1.70455% 9.35484%;}
.spr.page-colorful-head-hover1{ width:244px; height:220px; background-position:95.64394% 15.03226%;}
.spr.page-colorful-head-light{ width:190px; height:165px; background-position:1.41509% 55.60241%;}
.spr.page-colorful-hl1{ width:213px; height:222px; background-position:85.59322% 44.04916%;}
.spr.page-colorful-icon{ width:29px; height:29px; background-position:97.59916% 8.33333%;}
.spr.page-colorful-icon1{ width:8px; height:13px; background-position:81.7% 63.39104%;}
.spr.page-colorful-icon2{ width:8px; height:13px; background-position:81.7% 65.1222%;}
.spr.page-colorful-icon3{ width:16px; height:13px; background-position:46.23984% 84.16497%;}
.spr.page-colorful-lock{ width:31px; height:31px; background-position:98.42767% 35.32158%;}
.spr.page-colorful-num{ width:47px; height:23px; background-position:43.70933% 43.98148%;}
.spr.page-colorful-ring{ width:70px; height:70px; background-position:37.55708% 71.08108%;}
.spr.page-colorful-time{ width:42px; height:43px; background-position:42.59657% 59.82143%;}
.spr.page-tab-icon1.cur{ width:22px; height:20px; background-position:51.95473% 84.76923%;}
.spr.page-tab-icon1{ width:22px; height:20px; background-position:51.95473% 87.23077%;}
.spr.page-tab-icon2.cur{ width:15px; height:22px; background-position:81.84584% 67.47174%;}
.spr.page-tab-icon2{ width:15px; height:22px; background-position:29.51318% 89.15725%;}
.spr.pop-btn{ width:124px; height:38px; background-position:1.17187% 94.6186%;}
.spr.pop-btn1{ width:81px; height:38px; background-position:98.94614% 59.71787%;}
.spr.pop-close{ width:37px; height:37px; background-position:75.90234% 97.86013%;}
.spr.pop-share-line1{ width:3px; height:60px; background-position:99.10891% 8.60963%;}
.spr.pop-share-qrcode{ width:82px; height:82px; background-position:98.47418% 76.28697%;}
.spr.pop-share-text{ width:47px; height:15px; background-position:43.70933% 46.37755%;}
.spr.pop-share-title1{ width:112px; height:27px; background-position:98.10606% 84.8657%;}
.spr.pop-share-title2{ width:112px; height:27px; background-position:41.28788% 94.47314%;}
.spr.pop-share-title3{ width:112px; height:27px; background-position:97.34848% 88.06818%;}
.spr.pop1-item-box-search{ width:356px; height:30px; background-position:2.96053% 0.46632%;}
.spr.pop1-item-box{ width:356px; height:30px; background-position:2.96053% 3.98964%;}
.spr.pop1-pic{ width:59px; height:108px; background-position:36.63697% 90.47351%;}
.spr.pop1-search-icon{ width:12px; height:12px; background-position:94.05242% 79.60326%;}
.spr.pop1-tips1{ width:23px; height:23px; background-position:33.91753% 64.86626%;}
.spr.pop1-tips2{ width:45px; height:45px; background-position:42.87257% 49.84211%;}
.spr.pop2-frame.cur{ width:156px; height:233px; background-position:1.27841% 82.74278%;}
.spr.pop2-head-hover{ width:244px; height:127px; background-position:1.70455% 34.15899%;}
.spr.pop2-head.cur{ width:79px; height:79px; background-position:98.48485% 66.97598%;}
.spr.pop2-item-box1{ width:193px; height:30px; background-position:1.42857% 44.30052%;}
.spr.pop2-item-box2{ width:160px; height:30px; background-position:68.82184% 66.58031%;}
.spr.pop2-lock{ width:17px; height:26px; background-position:90.7332% 80.75335%;}
.spr.pop2-tab-cur{ width:35px; height:4px; background-position:94.18605% 81.98789%;}
.spr.tips-icon{ width:21px; height:13px; background-position:46.71458% 91.29328%;}
.spr.tips-left{ width:103px; height:40px; background-position:62.34568% 7.59162%;}
.spr.tips-right{ width:103px; height:40px; background-position:1.11111% 99.21466%;}

.spr-v1{ background-image:url(//game.gtimg.cn/images/lol/act/a20230715chromahub/spr-v1.png); background-repeat:no-repeat; background-size:745px 254px;}
.spr-v1.colorful-left-light{ width:186px; height:57px; background-position:65.20572% 37.30964%;}
.spr-v1.colorful-rare-done{ width:37px; height:37px; background-position:75.49435% 83.64055%;}
.spr-v1.colorful-rare-get{ width:37px; height:37px; background-position:81.28531% 83.64055%;}
.spr-v1.colorful-rare-headbox-done{ width:83px; height:83px; background-position:22.8852% 2.63158%;}
.spr-v1.colorful-rare-headbox{ width:83px; height:83px; background-position:36.02719% 2.63158%;}
.spr-v1.colorful-rare-hl{ width:143px; height:169px; background-position:0.74751% 5.29412%;}
.spr-v1.colorful-rare-lock{ width:37px; height:37px; background-position:78.31921% 33.87097%;}
.spr-v1.colorful-rare-unlock{ width:37px; height:37px; background-position:81.99153% 52.76498%;}
.spr-v1.page-colorful-btn.active{ width:73px; height:25px; background-position:85.49107% 97.16157%;}
.spr-v1.page-colorful-btn.hover{ width:73px; height:25px; background-position:91.74107% 84.06114%;}
.spr-v1.page-colorful-btn{ width:73px; height:25px; background-position:96.9494% 96.72489%;}
.spr-v1.page-colorful-time{ width:42px; height:43px; background-position:76.03129% 63.74408%;}
.spr-v1.page-nav-light{ width:313px; height:63px; background-position:50.34722% 84.55497%;}
.spr-v1.page-tab-icon1.cur{ width:33px; height:33px; background-position:86.58708% 70.36199%;}
.spr-v1.page-tab-icon1{ width:33px; height:33px; background-position:87.28933% 50%;}
.spr-v1.page-tab-icon2.cur{ width:33px; height:33px; background-position:91.78371% 66.74208%;}
.spr-v1.page-tab-icon2{ width:33px; height:33px; background-position:92.48596% 50%;}
.spr-v1.page-tab-icon3.cur{ width:33px; height:33px; background-position:96.98034% 66.74208%;}
.spr-v1.page-tab-icon3{ width:33px; height:33px; background-position:97.68258% 50%;}
.spr-v1.pop-share-line1{ width:3px; height:25px; background-position:93.46361% 80.56769%;}
.spr-v1.pop-share-title1{ width:115px; height:21px; background-position:34.52381% 98.06867%;}
.spr-v1.pop-share-title2{ width:115px; height:21px; background-position:53.4127% 98.06867%;}
.spr-v1.pop-share-title3{ width:115px; height:21px; background-position:72.30159% 98.06867%;}
.spr-v1.pop-share-title4{ width:115px; height:21px; background-position:57.85714% 57.72532%;}
.spr-v1.pop-share-title5{ width:115px; height:21px; background-position:57.85714% 57.72532%;}
.spr-v1.ranking-goto{ width:145px; height:33px; background-position:99.25% 33.25792%;}
.spr-v1.ranking-left-hl{ width:402px; height:65px; background-position:94.89796% 2.38095%;}
.spr-v1.ranking-select-arrow{ width:17px; height:17px; background-position:66.41484% 56.75105%;}
.spr-v1.series-skin-info-inv{ width:209px; height:66px; background-position:0.83955% 94.41489%;}
.spr-v1.series-skin-info{ width:209px; height:66px; background-position:28.26493% 48.67021%;}



.page-colorful-spr{ background-image:url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-spr.png); background-repeat:no-repeat; background-size:512px 512px;}
.page-colorful-spr.page-colorful-list-hover1{ width:244px; height:127px; background-position:1.6791% 1.16883%;}
.page-colorful-spr.page-colorful-list-hover1.posi{ width:244px; height:127px; background-position:94.21642% 1.16883%;}
.page-colorful-spr.page-colorful-list-hover2{ width:244px; height:127px; background-position:1.6791% 35.19481%;}
.page-colorful-spr.page-colorful-list-hover2.posi{ width:244px; height:127px; background-position:94.21642% 35.19481%;}
.page-colorful-spr.page-colorful-list-hover3{ width:244px; height:127px; background-position:1.6791% 69.22078%;}
.page-colorful-spr.page-colorful-list-hover3.posi{ width:244px; height:127px; background-position:94.21642% 69.22078%;}

/*a.spr:hover { -webkit-filter: brightness(1.1); filter: brightness(1.1);}
.page-collection-arrow a:hover,.page-details-arrow a:hover { -webkit-filter: brightness(1.1); filter: brightness(1.1);}*/
.home-info-pers:hover,.kv-open:hover { -webkit-filter: brightness(1.1); filter: brightness(1.1);}
.home-skin-default-btn:hover { -webkit-filter: brightness(1.8); filter: brightness(1.8);}

@font-face {
	font-family: "lol";
	src:url("//game.gtimg.cn/images/lol/act/a20230715chromahub/BeaufortforLOL-Bold.ttf");
}
.home-info-coll h5,.page-colorful-ring-p1,.page-colorful-num,.page-colorful-head1 span, .page-colorful-head2 span, .page-colorful-head3 span,.pop-share-bottom .home-info-box h5,.details-info p span,.pop-share-date,.collection-list-date p,.single-info p,.home-skin li p,.page-colorful-control-text,.page-colorful-head-hover-p2,.colorful-left-item p.p2,.colorful-rare-info p.p2,.colorful-rare-top-num p,.colorful-left-bot span,.ranking-left-td div.p1,.ranking-left-td div.p3,.ranking-right-list li h5,.series-name p,series-skin-info p span,.pop-share-serie-schedule span{
        font-family:"lol" ;
    }


.header {position: absolute; top: 88px; left: 35px; width: 985px; z-index: 999; padding: 0 !important;}

.wrapper{width: 1055px; height: 720px; position: absolute; left: 0; top: -80px; overflow: hidden; padding-top: 0; background: none;}
.page-home::before,.page-colorful::before,.page-collection::before,.page-details::before,.first-video::before,.first-kv::before { content: ""; position: absolute; left: 0; z-index: 9; width: 100%; height: 81px; background-color: #010a13; pointer-events: none;}
.wrapper *{ -webkit-box-sizing: border-box; box-sizing: border-box;}


.page-item { width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 1;}
.page-tab-box { width: 3165px; height: 100%; position: relative; z-index: 1; left: 0%;}
.page-tab-box.on { left: -1055px;}
.page-tab-box.on1 { left: -2110px;}
.page-list { width: 1055px; height: 100%; float: left; position: relative; overflow: hidden;}
.page-home,.page-ranking { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/home-bg.jpg) no-repeat; background-size: cover;}
.page-nav-box { position: absolute; z-index: 9; width: 100%; height: 59px; left: 0; bottom: 0; text-align: center;}
.page-nav-box:before { content: ""; width: 100%; height: 1px; background-color: #504e58; position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none;}
.page-nav-box:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: .9; background-color: #121D29;}
.page-nav-box div { position: relative; z-index: 3; width: 100%; height: 100%; padding: 0 42px;}
.page-nav-box div:after { content: ""; width: 100%; height: 1px; background-color: #504e58; position: absolute; z-index: 2; left: 0; top: 4px; pointer-events: none;}
.page-nav-box a { width: 33.33%; float: left; font-size: 0; text-align: center; position: relative; z-index: 3;}
.page-item-guest .page-nav-box a { float: none; display: inline-block; vertical-align: top;}
.page-nav-light { position: absolute; z-index: 1; bottom: 0; left: 50%; margin-left: -148px; opacity: 0; transition: all .3s ease;}
.page-nav-box a em,.page-nav-box a span { display: inline-block; vertical-align: top; margin: 0 5px; position: relative; z-index: 2;}
.page-nav-box a em { position: relative; top: 14px; transition: all .3s ease;}
.page-nav-box a em.page-tab-icon2 { top: 14px; margin: 0 3px;}
.page-nav-box a em.cur { display: none;}
.page-nav-box a span { color: #ab9a7d; font-size: 17px; line-height: 59px; transition: all .3s ease;}
.page-nav-box a.cur span { color: #f0f1f1; font-weight: bold; text-shadow: 0 2px 2px #000;}
.page-nav-box a.cur em { display: none;}
.page-nav-box a.cur em.cur { display: inline-block;}
.page-nav-box a.cur i { opacity: 1;}
.page-nav-box a:hover span { color: #f0f1f1; font-weight: bold; text-shadow: 0 2px 2px #000;}
.page-nav-box a:hover em { display: none;}
.page-nav-box a:hover em.cur { display: inline-block;}
.page-nav-box a:hover i { opacity: 1;}
.home-info { float: left; position: relative; z-index: 8; width: 241px; height: 100%; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/home-info2.png) no-repeat 0 0; background-size: 100% 100%;}
.home-info1 .home-info-coll li { padding-left: 64px; text-align: left;}
.home-info1 .home-info-coll li h5 { letter-spacing: 1px;}
.home-info-head { margin: 195px auto 0; position: relative; padding-top: 20px;}
.user-head-img { display: block; width: 105px; height: 105px; border-radius: 50%; position: relative; z-index: 1; margin: 0 auto; background-color: #fff;}
.head-layer { width: 106px; height: 106px; position: absolute; z-index: 3; top: 50%; left: 50%; margin: -53px 0 0 -53px;}
.head-initial { position: absolute; z-index: 3; top: 5px; left: 50%; width: 94px; height: 101px; transform: translateX(-50%) scale(1.72);}
.head-initial1 { width: 94px; height: 101px; top: 5px; margin-left: 0; transform: translateX(-50%) scale(1.72);}
.head-initial2 { width: 120px; height: 118px; top: 1px; margin-left: 0; transform: translateX(-50%) scale(1.66);}
.head-initial3 { width: 139px; height: 129px; top: -6px; margin-left: 0; transform: translateX(-50%) scale(1.58);}
.head-initial4 { width: 148px; height: 162px; top: -34px; margin-left: 0; transform: translateX(-50%) scale(1.58);}

.home-info-head-btn { width: 106px; height: 106px; position: absolute; z-index: 4; top: 50%; left: 50%; margin: -53px 0 0 -53px; opacity: 0; transition: all .3s ease; transform: scale(1.5);}
.home-info-head-btn em { position: absolute; top: 50%; left: 50%; margin: -21px 0 0 -21px; transform: scale(0.7);}
.home-info-head-btn:hover { opacity: 1;}
.home-info-user { margin-top: 31px; width: 100%; height: 82px; text-align: center;}
.home-info-user h5 { width: 94%; margin: 0 auto; line-height: 30px; color: #F0E6D2; font-size: 17px; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.home-info-user p { line-height: 26px; color: #A09B8C; font-size: 15px;}
.home-info-coll { width: 172px; height: auto; position: relative; margin: 35px auto 0;}
.home-info-box h5 { font-size: 28px; line-height: 30px; font-weight: bold; margin-left: 69px;}
.home-info-box .home-info-text { color: #a7a294; font-size: 13px; line-height: 20px; margin-left: 69px;}
.home-info-coll ul { text-align: center; width: 100%; padding-top: 40px;}
.home-info-coll li { display: inline-block; vertical-align: top; width: 100%; height: 55px; position: relative;}
.home-info-coll li.home-info-coll-li2 { display: none;}
.home-info-coll li h5 { width: 140px; margin: 0 auto; font-size: 28px; line-height: 32px; background-image: linear-gradient(#ddc479, #d0ad45); -webkit-background-clip: text; color: #E5D197; -webkit-text-fill-color: transparent; font-weight: bold; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.home-info-coll h5 b { font-size: 20px;}
.home-info-coll li p { display: block; line-height: 15px; color: #a09b8c; font-size: 10px;}
.home-info-coll li.home-info-coll-li1 p { position: absolute; width: 100%; text-align: center; left: 0; top: -38px;}
.home-info-coll li.home-info-coll-li1 p b { font-size: 22px;}
.home-skin { width: 715px; height: 100%; float: left; position: relative; z-index: 2; margin-left: 52px;}
.home-skin ul { width: 110%; margin-left: -5%; font-size: 0; text-align: center;}
.home-skin li { display: inline-block; vertical-align: top; width: 244px; height: 660px; margin: 0 6px; position: relative; transform: scale(.94); transform-origin: center top; opacity: 0;}
.home-skin-pic { width: 224px; height: 100%; position: relative; margin: 0 auto; overflow: hidden;}
.home-skin-pic .ani-bg { position: absolute; width: 1280px; left: 50%; transform: translateX(-50%); height: auto;  margin: 0 0 0 -12px; overflow: hidden; }
.home-skin li img { display: block; width: 100%; height: auto; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;}
.home-skin li video { position: absolute; left: 50%; top: 0;transform: translateX(-50%); width: 1290px; height: auto; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;}
.home-skin-info { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4;}
.home-skin li span.spr { position: absolute; top: 467px; left: 50%; margin-left: -12px;}
.home-skin li h5 { width: 172px; margin: 0 auto; padding-top: 505px; line-height: 22px; color: #f8eed9; font-size: 12px; font-weight: bold;}
.home-skin-pic1 { width: 226px;}
.home-skin li .home-skin-default-info1 h5 { padding-top: 400px;}
.home-skin li .home-skin-default-info1 p:nth-child(3) { margin-bottom: 86px;}
.home-skin li .home-skin-default-info1 p:nth-child(4) { color: #a3998f;}
.home-skin li .home-skin-default-info2 h5 { padding-top: 396px; margin-bottom: 117px;}
.home-skin li .home-skin-default-info2 p:nth-child(2) { color: #a3998f;}
.home-skin-default-btn { position: absolute; left: 50%; top: 291px; margin-left: -39px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/home-skin-default-btn.png) no-repeat 0 0; background-size: 100% 100%; width: 78px; height: 78px;}
.home-skin li span.home-skin-line { top: 522px; margin-left: -87px;}
.home-skin li p { width: 172px; margin: 0 auto; color: #a59a92; font-size: 10px; line-height: 27px;}
.home-skin li p em { display: inline-block; vertical-align: top; margin: 8px 4px 0;}
.home-skin-layer { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/home-skin-layer.png) no-repeat 0 0; background-size: 100% auto; width: 244px; height: 640px; position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none; border-radius: 65px;}
.home-skin li.big { z-index: 2;}
.home-skin-layer.default { display: none;}

.home-skin-outside { position: absolute; pointer-events: none;}
.home-skin .home-skin-outside video { margin: 0 0 0 -12px;}
@keyframes xing {  
   0%{ transform:skewY(0);}
   50%{ transform:skewX(2deg);}
   100%{ transform:skewX(0);}
 } 

.home-skin-outside1 { width: 724px; height: 630px; position: absolute; z-index: 3; top: 0; left: -240px; pointer-events: none;}
.home-btns { position: absolute; z-index: 9; top: 98px; right: 4px; width: 260px; text-align: right;}
.home-btns a { display: inline-block; vertical-align: top; margin-right: 12px; position: relative;}
.home-icon-set-tips { position: absolute; left: -200px; top: -5px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/home-icon-set-tips.png) no-repeat 0 0; background-size: 100% 100%; width: 196px; height: 64px; pointer-events: none; display: none;}
.home-icon-set-tips p { font-size: 13px; color: #32281d; line-height: 18px; padding-top: 14px; padding-left: 14px; text-align: left;}
.home-icon-set-tips p span { font-size: 15px; display: block; font-weight: bold;}
.page-colorful { background-color: #07121c;}
.page-colorful-scroll { position: relative; overflow-y: auto; width: 100%; height: 581px; margin-top: 81px; padding-top: 36px;}
.page-colorful-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px; 
}
.page-colorful-scroll::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.page-colorful-scroll::-webkit-scrollbar-corner { 
  display: block; 
}
.page-colorful-scroll::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #68521f; 
  border-radius: 4px; 
}
.comm-tips { display: none; position: absolute; z-index: 9; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: auto;}
.comm-tips em { position: absolute; z-index: 1;}
.comm-tips-left { left: -2px; width: 90%; overflow: hidden;}
.comm-tips-right { right: -2px; width: 90%; overflow: hidden;}
.comm-tips em i { display: block;}
.comm-tips-right i { float: right;}
.comm-tips span { white-space: nowrap; position: relative; z-index: 2; display: inline-block; vertical-align: top; color: #a7a294; font-size: 15px; padding: 0 14px; line-height: 39px;}
.tips-bottom .tips-icon { left: 50%; margin-left: -10px; top: 36px; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.tips-top .tips-icon { left: 50%; margin-left: -10px; top: -9px;}
.home-info-coll .comm-tips { top: -55px;}
.home-info-coll li:hover .comm-tips { display: block;}
.home-btns a .comm-tips { top: 55px;}
.home-btns a:hover .comm-tips { display: block;}
.home-icon-share .comm-tips { margin-left: -30px;}
.home-icon-share .tips-icon { margin-left: 20px;}
.page-colorful-reward { width: 100%; height: 163px; position: relative; z-index: 7;}
.page-colorful-tit { position: absolute; top: 17px; left: 27px; color: #f8eed9; font-size: 15px; line-height: 20px;}
.page-colorful-ring { float: left; margin: 45px 93px 0 26px; position: relative;}
.skin-ring { width: 60px; height: 60px; position: absolute; z-index: 1; top: 50%; left: 50%; margin: -30px 0 0 -30px;}
.skin-ring canvas { position: relative; left: -4px; top: -4px;}
.page-colorful-ring-p1 { width: 100%; line-height: 30px; position: absolute; z-index: 2; left: 0; top: 50%; margin-top: -15px; color: #f8eed9; font-size: 12px; text-align: center;}
.page-colorful-ring-p1 span { color: #c79b3c;}
.page-colorful-ring-p2 { width: 60px; position: absolute; left: 76px; top: 50%; margin-top: -15px; line-height: 30px; color: #cdbe91; font-size: 14px;}
.page-colorful-prog { position: relative; float: left; margin-top: 71px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-prog.png) no-repeat 0 0; background-size: 100% 100%; width: 842px; height: 82px;}
.page-colorful-icon { position: absolute; z-index: 2; left: -15px; top: -3px;}
.page-colorful-prog-bar { position: absolute; z-index: 1; left: 11px; top: 5.5px; width: 824px; height: 9px; overflow: hidden; border-radius: 9px;}
.page-colorful-prog-bar em { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/bar.png) no-repeat top right; background-size: 824px 9px; display: block; height: 9px; width: 0;}
.page-colorful-prog ul { position: relative; z-index: 2; width: 100%; height: 100%;}
.page-colorful-prog li { width: 150px; height: 100%; margin-left: 150px; float: left; position: relative; cursor: pointer;}
.page-colorful-prog li:nth-child(1) { margin-left: 80px;}
.page-colorful-head1 { position: absolute; z-index: 5; top: -75px; left: 50%; margin-left: -77px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-head1.png) no-repeat 0 0; background-size: 100% 100%; width: 154px; height: 150px;}
.page-colorful-head2 { position: absolute; z-index: 5; top: -82px; left: 50%; margin-left: -86px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-head2.png) no-repeat 0 0; background-size: 100% 100%; width: 172px; height: 160px;}
.page-colorful-head3 { position: absolute; z-index: 5; top: -113px; left: 50%; margin-left: -93px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-head3.png) no-repeat 0 0; background-size: 100% 100%; width: 186px; height: 204px;}
.page-colorful-head1 span,.page-colorful-head2 span,.page-colorful-head3 span { width: 40px; margin: 0 auto; display: block; line-height: 38px; color: #ffffff; font-size: 14px; font-weight: bold; text-align: center; text-shadow: 0 2px 2px #000;}
.page-colorful-head1 span { padding-top: 100px;}
.page-colorful-head2 span { padding-top: 107px;}
.page-colorful-head3 span { padding-top: 139px;}
.page-colorful-num { position: absolute; text-align: center; left: -78px; line-height: 23px; color: #e7fdfd; font-size: 14px; top: 24px; pointer-events: none; display: none;}
.page-colorful-prog li:nth-child(2) .page-colorful-num,.page-colorful-prog li:nth-child(3) .page-colorful-num { left: -98px;}
.page-colorful-prog li .page-colorful-hl { position: absolute; z-index: 2; width: 100%; height: 137px; pointer-events: none; display: none; background: none; top: -60px; left: 10px;}
.page-colorful-hl1 { transform: scale(1.9);}
.page-colorful-hl2 { transform: scale(2.1);}
.page-colorful-hl3 { transform: scale(2.4);}
.page-colorful-hl video { width: 100%;}
.page-colorful-head-light { display: none; position: absolute; top: -72px; left: 50%; margin-left: -96px; z-index: 6; pointer-events: none;}
.page-colorful-head-hover { display: none; position: absolute; top: 95px; z-index: 7; left: 50%; margin-left: -122px; pointer-events: none;}
.page-colorful-head-hover1 { margin-left: -149px;}
.page-colorful-head-hover .page-colorful-head1 { top: 20px;}
.page-colorful-head-hover .page-colorful-head2 { top: 12px;}
.page-colorful-head-hover .page-colorful-head3 { top: -10px; transform: scale(.85);}
.page-colorful-head-hover-p1 { padding-top: 170px; line-height: 48px; color: #fff6e0; font-size: 14px; margin-left: 19px; float: left; width: 160px;}
.page-colorful-head-hover-p2 { padding-top: 170px; line-height: 48px; color: #c79b3c; font-size: 14px; margin-right: 22px; float: right; text-align: right; width: 35px;}
.page-colorful-head-hover-p3 { display: none; text-align: center; width: 100%; position: absolute; top: 168px; left: 0; line-height: 20px; color: #f8eed9; font-size: 12px;}
.page-colorful-head-hover-p3 em { display: inline-block; vertical-align: top; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/tips1.png) no-repeat 0 0; background-size: 100% 100%; width: 14px; height: 14px; margin: 3px 6px 0;}
.page-colorful-head-hover.tips { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-head-tips1.png) no-repeat 0 0; background-size: 100% 100%; width: 243px; height: 244px;}
.page-colorful-head-hover1.tips { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-head-tips2.png) no-repeat 0 0; background-size: 100% 100%; width: 243px; height: 244px;}
.page-colorful-head-hover.tips .page-colorful-head-hover-p3 { display: block;}
.page-colorful-head-hover.tips .page-colorful-head-hover-p1 { padding-top: 194px;}
.page-colorful-head-hover.tips .page-colorful-head-hover-p2 { padding-top: 194px;}
.page-colorful-done1 { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-done1.png) no-repeat 0 0; background-size: 100% 100%; width: 154px; height: 150px; pointer-events: none; position: absolute; z-index: 6; left: 50%; top: -75px; transform: translateX(-50%); display: none;}
.page-colorful-done2 { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-done2.png) no-repeat 0 0; background-size: 100% 100%; width: 172px; height: 160px; pointer-events: none; position: absolute; z-index: 6; left: 50%; top: -81px; transform: translateX(-50%); display: none;}
.page-colorful-done3 { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-done3.png) no-repeat 0 0; background-size: 100% 100%; width: 186px; height: 204px; pointer-events: none; position: absolute; z-index: 6; left: 50%; top: -113px; transform: translateX(-50%); display: none;}
.page-colorful-prog li:hover .page-colorful-head-light { display: block;}
.page-colorful-prog li:hover .page-colorful-head-hover { display: block;}
.page-colorful-prog li.highlight .page-colorful-hl { display: block;}
.page-colorful-prog li.done .page-colorful-done1 { display: block;}
.page-colorful-prog li.done .page-colorful-done2 { display: block;}
.page-colorful-prog li.done .page-colorful-done3 { display: block;}
.page-colorful-control { padding: 20px 23px 0 27px; width: 1055px; height: 62px; position: absolute; top: 280px; left: 0; z-index: 6;}
.page-colorful-control-text { float: left; color: #f8eed9; font-size: 15px; line-height: 30px; text-align: left;}
.page-colorful-control-list { float: right; text-align: right;}
.page-colorful-control-prog { display: none; position: absolute; height: 30px; line-height: 30px; top: 36px; left: 413px;}
.page-colorful-control-p1 { width: 65px; float: left; color: #f8eed9; font-size: 15px;}
.page-colorful-control-bar { float: left; width: 111px; height: 8px; border: 1px solid #5e4311; position: relative; margin-top: 11px;}
.page-colorful-control-bar ul { width: 100%; height: 100%; position: relative; z-index: 2;}
.page-colorful-control-bar li { float: left; width: 20%; height: 100%; position: relative;}
.page-colorful-control-bar li:after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; background-color: #5e4311;}
.page-colorful-control-bar em { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 100%; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-control-bar.png) no-repeat right top; background-size: 111px 8px;}
.page-colorful-control-p2 { float: left; font-size: 15px; margin-left: 7px; color: #f8eed9;}
.page-colorful-control-p2 span { color: #c79b3c;}
.page-colorful-control.top-fix { top: 81px !important; background-color: #040710; height: 98px; padding-top: 36px; z-index: 10;}
.page-colorful-control.top-fix .page-colorful-control-prog { display: block;}
.page-colorful-box { display: inline-block; vertical-align: top; text-align: center; margin-left: 8px; position: relative; cursor: pointer; background: none;}

.page-colorful-box { border: 1px solid #745610; background-color: #0f181e; border-color: #fbf0d9; border-image: linear-gradient(#b8995d,#6b5927) 2 2;}
.page-colorful-box:hover { border-image: linear-gradient(#eee4cd,#c99e42) 2 2;}
.page-colorful-box.gray { border-color: #443614; border-image: none;}
.page-colorful-box.gray h5 { color: #463714;}
.page-colorful-box.gray .page-colorful-icon1 { display: none;}
.page-colorful-box.gray .page-colorful-icon2 { display: block;}
.page-colorful-box.gray h5 i.top { border-bottom: 8px solid #463714;}
.page-colorful-box.gray h5 i.bot { border-top: 8px solid #463714;}
.page-colorful-box h5 { pointer-events: none; margin-left: 12px; line-height: 30px; color: #b5b095; font-size: 12px; text-align: left;}
.page-colorful-box-time i { display: inline-block; vertical-align: top; margin: 12px 5px 0; width: 0; height: 0;}
.top { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #cdbe91;}
.bot { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #cdbe91;}
.page-colorful-box-time ul { display: none; width: 160px; margin-left: -1px; height: auto; border: 1px solid #443614; position: relative; z-index: 3; top: -1px; border-top: none; background-color: #010a13;}
.page-colorful-box-time.gray ul { display: block;}
.page-colorful-box-time li { width: 100%; padding-left: 12px; background-color: #010a13; border-top: 1px solid #232425; line-height: 27px; color: #cdbe91; font-size: 12px; text-align: left; position: relative;}
.page-colorful-box-time li:nth-child(1) { border-top: none;}
.page-colorful-icon1,.page-colorful-icon2 { position: absolute; top: 9px; right: 14px; z-index: 2;}
.page-colorful-icon2 { display: none;}
.page-colorful-icon3 { position: absolute; top: 8px; right: 16px; display: none;}
.page-colorful-box-time li.cur .page-colorful-icon3 { display: block;}
.page-colorful-box-time li:hover { background-color: #000;}
.page-colorful-skin-list { width: 100%; height: auto; position: relative;}
.page-colorful-skin-list ul { zoom: 1; padding-left: 15px;}
.page-colorful-skin-list ul:after{ clear:both; display:block; content:""; height:0px; overflow:hidden;}
.page-colorful-skin-list li { cursor: pointer; float: left; width: 148px; height: 284px; margin: 0 0 0 16px; position: relative;}
.page-colorful-skin-pic { position: relative; overflow: hidden; width: 148px; height: 227px;}
.page-colorful-skin-list li .page-colorful-skin-pic img { display: block; width: 100%; height: auto;}
.page-colorful-skin-list li .page-colorful-skin-pic video { position: absolute; top: 0; left: 0; width: 100%; height: auto;}
.page-colorful-skin-list li .page-colorful-skin-pic img.site1-68eea57a-9ad0-4b61-b2a7-ef40a07f1040 { top: -90px;}
.skin-list-info { position: absolute; z-index: 7; left: 0; top: 0; padding-top: 213px; height: 263px; width: 100%; text-align: center;}
.skin-list-info h5 { font-weight: normal; position: absolute; z-index: 2; width: 166px; left:50%; margin-left: -83px; bottom: 27px; line-height: 24px; color: #f8eed9; font-size: 15px;}
.skin-list-info p { position: absolute; z-index: 2; width: 166px; left:50%; margin-left: -83px; bottom: 0; line-height: 20px; color: #F0E6D2; font-size: 10px;}
.skin-list-info em { display: block; margin: -5px auto 0; position: relative; z-index: 2;}
.skin-list-info a { text-align: center; position: absolute; z-index: 3; left: 50%; margin-left: -36.5px; top: 174px; line-height: 25px; color: #CDBE91; font-weight: normal; letter-spacing: 1px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.30);; font-size: 10px; text-align: center; opacity: 0; transition: all .3s;}
.skin-list-info a:hover { color: #F0E6D2; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.30);}
.skin-list-info a:active { color: #785A28; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.30);}
.page-colorful-skin-list li .comm-tag { position: absolute; z-index: 6; left: 0; width: 100%; top: 153px; height: 60px; margin: 0 auto; transition: all .3s ease; opacity: 1;}
.page-colorful-skin-list li .comm-tag img { height: 100%; width: auto; display: block; margin: 0 auto;}
.colorful-rare-border { position: absolute; z-index: 3; top: 0; left: 0; pointer-events: none; width: 148px; height: 227px;}
.colorful-rare-skin-pic { width: 100%; height: 100%; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/colorful-rare-skin-pic.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 1; top: 0; left: 0; opacity: 0;}
.colorful-rare-skin-pic-hl { width: 100%; height: 100%; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/colorful-rare-skin-pic-hl.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; top: 0; left: 0; opacity: 0;}
.colorful-rare-skin-pic1 { width: 100%; height: 238px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/colorful-rare-skin-pic1.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 1; top: -11px; left: 0; opacity: 0;}
.colorful-rare-skin-pic1-hl { width: 100%; height: 238px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/colorful-rare-skin-pic1-hl.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; top: -11px; left: 0; opacity: 0;}

.page-colorful-list-hover { background-image:url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-spr.png); background-repeat:no-repeat; background-size:512px 512px; width:244px; height:127px; background-position:1.6791% 35.19481%;}
.page-colorful-list-hover.posi { background-position:94.21642% 35.19481%;}
.page-colorful-skin-list li:nth-child(5n) .page-colorful-list-hover { background-position:1.6791% 69.22078%; margin-left: -69px;}
.page-colorful-skin-list li:nth-child(5n) .page-colorful-list-hover.posi { background-position:94.21642% 69.22078%;}
.page-colorful-skin-list li:nth-child(5n+1) .page-colorful-list-hover { background-position:1.6791% 1.16883%; margin-left: -28px;}
.page-colorful-skin-list li:nth-child(5n+1) .page-colorful-list-hover.posi {background-position:94.21642% 1.16883%;}
.page-colorful-list-hover { pointer-events: none; display: none; position: fixed; z-index: 8; margin-left: -48px; margin-top: -364px; font-size: 0; text-align: center;}
.page-colorful-list-hover-box { width: 100%; height: 68px; padding-top: 24px;}
.page-colorful-list-hover em,.page-colorful-list-hover h5 { display: inline-block; line-height: 25px; vertical-align: middle; margin: 0 8px;}
.page-colorful-list-hover h5{ color: #fff6e0; font-size: 14px;}
.page-colorful-list-hover p { position: absolute; top: 68px; color: #a67315; font-size: 14px; line-height: 41px; text-align: center; width: 100%;}
.page-colorful-skin-list li:hover .page-colorful-list-hover { display: block;}
.page-colorful-time { position: absolute; z-index: 5; left: 9px; top: 0; display: none;}
.page-colorful-skin-list-gray { width: 180px; height: 276px; position: absolute; display: none; z-index: 2; left: 1px; top: 1px; background-color: rgba(0,0,0,0.5);}
.page-colorful-skin-list li:hover .page-colorful-skin-list-gray { opacity: 0;}
.page-colorful-lock { position: relative; top: -3px;}
.page-colorful-skin-list li.get:hover .skin-list-info h5 { display: none;}
.page-colorful-skin-list li.get:hover .skin-list-info a { opacity: 1;}
.page-colorful-list-hover.posi { transform: translateY(390px);}
.page-colorful-list-hover.posi .page-colorful-list-hover-box { padding-top: 36px;}
.page-colorful-list-hover.posi p { top: 82px;}
.page-colorful-skin-list li.get:hover .comm-tag { opacity: 0;}
.page-colorful-skin-list li.lock:before { content: ""; pointer-events: none; width: 146px; height: 225px; background-color: rgba(0,0,0,0.35); position: absolute; left: 1px; top: 1px; z-index: 6;}
.page-colorful-skin-list li.lock .colorful-rare-skin-pic { opacity: 1;}
.page-colorful-skin-list li.lock:hover .colorful-rare-skin-pic { opacity: 0;}
.page-colorful-skin-list li.lock:hover .colorful-rare-skin-pic-hl { opacity: 1;}
.page-colorful-skin-list li.lock:hover:before { display: none;}
.page-colorful-skin-list li.lock:hover .page-colorful-skin-pic img { -webkit-filter: brightness(1.05); filter: brightness(1.05);}
.page-colorful-skin-list li.unlock .colorful-rare-skin-pic1 { opacity: 1;}
.page-colorful-skin-list li.unlock .page-colorful-skin-pic { -webkit-mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-skin-mask.png); mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-colorful-skin-mask.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.page-colorful-skin-list li.unlock:hover .colorful-rare-skin-pic1 { opacity: 0;}
.page-colorful-skin-list li.unlock:hover .colorful-rare-skin-pic1-hl { opacity: 1;}
.page-colorful-skin-list li.unlock:hover .page-colorful-skin-pic img { -webkit-filter: brightness(1.05); filter: brightness(1.05);}


/*pop*/
.pop-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 99;}
.pop-comm { position: absolute !important; left: 50%; top: 54%; -webkit-transform:translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99;}
.comm-pop { display: none; position: relative; outline: none;}
@keyframes bounceIntop {
	0% {opacity: 0; margin-top: -400px;}
	100% {margin-top: 0;}
}
.pop1 { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/pop1.png) no-repeat 0 0; width: 653px; height: 583px; background-size: 100% 100%;}
.pop-close { position: absolute; top: 5px; right: 14px; z-index: 6;}
.pop1-title { width: 100%; height: 49px; line-height: 44px; color: #f0e6d2; font-size: 19px; font-weight: bold; padding: 5px 0 0 15px;}
.pop1-disbox { position: absolute; top: 58px; height: 106px; width: 230px;}
.pop1-disbox ul { font-size: 0; text-align: center;}
.pop1-disbox li { display: inline-block; vertical-align: top; width: 61px; height: 106px; border: 1px solid #4e4d52; position: relative; overflow: hidden;}
.pop1-disbox li img { display: none; width: auto; height: 108%; position: absolute; z-index: 2; top: -4%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: .6;}
.pop1-disbox li em { position: absolute; z-index: 1; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.pop1-disbox li:nth-child(2) { height: 88px; position: absolute; top: 10px; left: 12px;}
.pop1-disbox li:nth-child(3) { height: 88px; position: absolute; top: 10px; left: 157px;}
.pop1-tips1 { position: absolute; z-index: 4; left: 50%; top: 50%; margin: -11px 0 0 -11px; line-height: 22px; color: #f0e6d2; font-size: 12px; font-weight: bold;}
.pop1-tips2 { position: absolute; z-index: 4; left: 50%; top: 50%; margin: -22px 0 0 -22px; line-height: 44px; color: #f0e6d2; font-size: 16px; font-weight: bold; display: none;}
.pop1-condition { margin-left: 272px; width: 358px; height: 102px; margin-top: 25px;}
.pop1-item-box { margin-bottom: 18px; position: relative; cursor: pointer; background: none;}
.input-clear { display: block; margin: 0 auto;}
.input-clear-btn { position: absolute; height: 100%; right: 0px; padding-top: 9px; width: 34px; display: none;}
.pop1-item-box-search { border: 1px solid #745610;}
.pop1-item-box-search:hover { border-image: linear-gradient(#eee4cd,#c99e42) 2 2;}
.pop1-item-box-time { border: 1px solid #745610; background-color: #0f181e; border-color: #fbf0d9; border-image: linear-gradient(#b8995d,#6b5927) 2 2;}
.pop1-item-box-time:hover { border-image: linear-gradient(#eee4cd,#c99e42) 2 2;}
.pop1-item-box.gray { border-color: #443614; border-image: none;}
.pop1-item-box.gray h5 { color: #463714;}
.pop1-item-box.gray .page-colorful-icon1 { display: none;}
.pop1-item-box.gray .page-colorful-icon2 { display: block;}
.pop1-item-box.gray h5 i.top { border-bottom: 8px solid #463714;}
.pop1-item-box.gray h5 i.bot { border-top: 8px solid #463714;}
.pop1-item-box h5 { pointer-events: none; margin-left: 12px; line-height: 30px; color: #b5b095; font-size: 12px; text-align: left;}
.pop1-item-box-time i { display: inline-block; vertical-align: top; margin: 12px 5px 0; width: 0; height: 0;}
.pop1-item-box-time ul { display: none; width: 356px; margin-left: -1px; height: auto; border: 1px solid #443614; position: relative; z-index: 3; top: -1px; border-top: none;}
.pop1-item-box-time.gray ul { display: block;}
.pop1-item-box-time li { width: 100%; padding-left: 12px; background-color: #010a13; border-top: 1px solid #232425; line-height: 27px; color: #cdbe91; font-size: 12px; text-align: left; position: relative;}
.pop1-item-box-time li:nth-child(1) { border-top: none;}
.page-colorful-icon1,.page-colorful-icon2 { pointer-events: none; position: absolute; top: 9px; right: 14px; z-index: 2;}
.page-colorful-icon2 { display: none;}
.page-colorful-icon3 { position: absolute; top: 8px; right: 16px; display: none;}
.pop1-item-box-time li.cur .page-colorful-icon3 { display: block;}
.pop1-item-box-time li:hover { background-color: #000;}
.pop1-item-box-search h5 em { display: inline-block; vertical-align: middle; margin-right: 5px; position: relative; top: -2px;}
.pop1-item-box-search h5 { float: left;}
.pop1-item-box-search h5 a { color: #b5b095;}
.pop1-item-box-search input { width: 295px; height: 100%; background: none; border: none; float: left; color: #b5b095; font-size: 12px; margin-left: 5px;}
.pop1-item-box-search input::-webkit-input-placeholder { color: #b5b095;}
.pop1-skin-box { width: 648px; height: 358px; margin-top: 4px; overflow-y: auto;}
.pop1-skin-box::-webkit-scrollbar {
  width: 5px;
  height: 5px; 
}
.pop1-skin-box::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.pop1-skin-box::-webkit-scrollbar-corner { 
  display: block; 
}
.pop1-skin-box::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #68521f; 
  border-radius: 4px; 
}
.pop1-skin-box h5 { margin-left: 20px; height: 36px; line-height: 32px; color: #f0e6d2; font-size: 15px; font-weight: bold;}
.pop1-skin-box ul { margin-left: 12px;}
.pop1-skin-box li { width: 145px; height: 183px; float: left; margin-left: 8px; cursor: pointer;}
.pop1-skin-box li div { position: relative; text-align: center; width: 100%; height: 145px; border: 2px solid #4e4d52; overflow: hidden;}
.pop1-skin-box li img { display: block; width: 100%; position: relative; top: 0;}
.pop1-skin-box li.cur img { opacity: 1 !important;}
.pop1-skin-box li p { height: 32px; line-height: 32px; color: #f0e6d2; font-size: 0; text-align: center;}
.pop1-skin-box li p span { display: inline-block; vertical-align: middle; font-size: 12px; line-height: 16px;}
.pop1-layer { position: absolute; left: 0; bottom: 7px; z-index: 5; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/pop1-layer.png) no-repeat 0 0; background-size: 100% 100%; width: 651px; height: 71px;}
.pop1-btn-box { width: 100%; font-size: 0; position: absolute; left: 0; bottom: 1px; z-index: 8; text-align: center;}
.pop1-btn-box a { display: inline-block; vertical-align: top; margin: 0 20px; color: #d1c492; font-size: 0; text-indent: -999px; overflow: hidden; font-weight: bold; line-height: 37px; position: relative;}
.pop1-btn-box a:hover:after { content: ""; position: absolute; left: 5px; top: 3px; width: 109px; height: 28px; border: 2px solid #fbf0d9; border-image: linear-gradient(#fbf0d9,#d1a443) 2 2;}
.pop1-skin-box li div:hover { border-color: #fbf0d9; border-image: linear-gradient(#fbf0d9,#d1a443) 20 20;}
.pop1-skin-box li.cur div { border-color: #fbf0d9; border-image: linear-gradient(#fbf0d9,#d1a443) 20 20;}
.pop2 { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/pop2.png) no-repeat 0 0; width: 751px; height: 563px; background-size: 100% 100%;}
.pop2-title { width: 100%; line-height: 30px; color: #f0e6d2; font-size: 19px; font-weight: bold; padding: 25px 0 0 35px;}
.pop2-tab-box { width: 100%; height: 46px; padding-top: 6px; padding-left: 22px; text-align: left;}
.pop2-tab-box a { line-height: 24px; color: #e8d59d; font-size: 12px; display: inline-block; vertical-align: top; float: left; width: auto; padding: 0 14px; position: relative;}
.pop2-tab-cur { position: absolute; bottom: -1px; left: 50%; margin-left: -17px; display: none;}
.pop2-tab-box a.cur { color: #fff;}
.pop2-tab-box a.cur i { display: block;}
.pop2-tab-cont { width: 100%; height: 461px;}
.pop2-tab-item { display: none; height: 100%; position: relative; position: relative;}
.pop2-item-box1 { margin: 0 0 28px 33px; float: left;}
.pop2-item-box1 input { width: 132px;}
.pop2-item-box1 input::-webkit-input-placeholder { color: #b5b095;}
.pop2-item-box2 { float: right; margin-right: 37px;}
.pop2-item-box2 ul { width: 160px;}
.pop2-head-box { width: 746px; height: 357px; overflow-y: auto;}
.pop2-head-box::-webkit-scrollbar {
  width: 5px;
  height: 5px; 
}
.pop2-head-box::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.pop2-head-box::-webkit-scrollbar-corner { 
  display: block; 
}
.pop2-head-box::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #68521f; 
  border-radius: 4px; 
}
.pop2-head-tit { margin-left: 34px; padding-top: 9px; height: 48px; line-height: 23px; color: #f0e6d2; font-size: 15px; font-weight: bold;}
.pop2-head-box ul { margin-left: 14px; overflow: hidden;}
.pop2-head-box ul li { float: left; margin-left: 20px; margin-bottom: 20px; cursor: pointer; position: relative; width: 79px; height: 79px; border: 1px solid #4b4105; position: relative;}
.pop2-head-box ul li:hover { background: none; border-width: 2px; border-color: #795b28; border-image: linear-gradient(#795b28,#c7a96d) 2 2;}
.pop2-head-box ul li.cur { background: none; border-width: 2px; border-color: #795b28; border-image: linear-gradient(#795b28,#c7a96d) 2 2;}
.pop2-head-box ul li img { display: block; width: 100%; height: 100%;}
.pop2-head-hover { display: none; position: fixed; z-index: 4; margin: -212px 0 0 -84px; text-align: center;}
.pop2-head-hover h5 { width: 100%; color: #fff6e0; font-size: 14px; line-height: 20px; padding-top: 27px; height: 68px;}
.pop2-head-hover p { color: #a67315; font-size: 14px; line-height: 20px; padding-top: 10px;}
.pop2-head-box ul li:hover .pop2-head-hover { display: block;}
.pop2-layer { position: absolute; left: 0; bottom: 7px; z-index: 5; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/pop2-layer.png) no-repeat 0 0; background-size: 100% 100%; width: 749px; height: 71px;}
.pop2-frame-box { width: 741px; height: 357px; overflow-y: auto;}
.pop2-frame-box::-webkit-scrollbar {
  width: 5px;
  height: 5px; 
}
.pop2-frame-box::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.pop2-frame-box::-webkit-scrollbar-corner { 
  display: block; 
}
.pop2-frame-box::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #68521f; 
  border-radius: 4px; 
}
.pop2-frame-box ul { margin-left: 15px;}
.pop2-frame-box li { width: 155px; height: 232px; border: 1px solid #333439; float: left; margin: 0 0 18px 18px; background-color: rgba(24,26,32,0.8); position: relative; cursor: pointer;}
.pop2-frame-box li:hover { background-color: #00070d;}
.pop2-frame-box li.lock:hover { background-color: rgba(24,26,32,0.8);}
.pop2-head { width: 100%; height: 155px; position: relative; z-index: 2;}
.pop2-head img { display: block; margin: 0 auto; position: relative; width: 100%;}
.pop2-head img.head1 { width: 94px; height: 101px; top: 28px;}
.pop2-head img.head2 { width: 120px; height: 118px; top: 22px;}
.pop2-head img.head3 { width: 139px; height: 129px; top: 15px;}
.pop2-head img.head4 { width: 148px; height: 162px; top: -8px;}
.pop2-head-text { width: 100%; height: auto; text-align: center; position: relative; z-index: 3;}
.pop2-head-p1 { color: #f0e6d2; font-size: 14px; line-height: 20px;}
.pop2-head-p2 { color: #a6a191; font-size: 12px; line-height: 20px;}
.pop2-head-p3 { color: #dbd8ce; font-size: 12px; line-height: 20px; margin-top: 7px;}
.pop2-lock { display: none; position: absolute; top: 64px; left: 50%; margin-left: -8px; z-index: 3;}
.pop2-frame-box li.lock .pop2-lock { display: block;}
.pop2-frame-box li.lock .pop2-head-p3 { color: #a6a191;}
.pop2-frame { display: none; position: absolute; z-index: 1; left: 0; top: 0;}
.pop2-frame-box li.cur .pop2-frame { display: block;}
.pop2-frame-box li:hover .pop2-frame { display: block;}
.pop2-frame-box li.lock:hover .pop2-frame { display: none;}
.pop-share { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/pop-share.png) no-repeat 0 0; width: 809px; height: 500px; background-size: 100% 100%; padding-top: 5px; margin-left: -82px;}
.pop-share-back { position: absolute; top: -11px; right: -98px; z-index: 6;}
.pop-share-cont { position: relative; overflow: hidden; z-index: 1; width: 806px; height: 489px; margin: 0 auto; text-align: center;}
.pop-share-cont img { display: block; width: 100%; height: auto;}
.pop-share-layer { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/pop-share-layer.png) no-repeat 0 0; background-size: 100% 100%; width: 100%; height: 239px; position: absolute; z-index: 1; left: 0; bottom: 0; pointer-events: none;}
.pop-share-logo { position: absolute; z-index: 4; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/logo.png) no-repeat 0 0; background-size: 100% auto; width: 144px; height: 83px; top: 0; left: 0;}
.single-info { width: 100%; height: auto; position: absolute; left: 0; top: 268px; z-index: 4;}
.single-info h5 { line-height: 25px; color: #F0E6D2; font-size: 16px; font-weight: bold; letter-spacing: 2px;}
.single-info p { color: #F0E6D2; font-size: 10px; line-height: 16px;}
.single-info .comm-tag { height: 70px; position: relative; top: 2px; z-index: 5; margin-bottom: 11px;}
.single-info .comm-tag img { display: block; margin: 0 auto; width: auto; height: 100%; border-radius: 0;}
.pop-share-bottom { position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; height: 121px;}
.pop-share-info { float: left; width: 432px; height: 100%; position: relative;}
.pop-share-line1 { position: absolute; right: -2px; top: 43px;}
.pop-share-info .home-info-head { margin: 20px 0 0 0; transform: scale(.5); transform-origin: center top; background: none;}
.pop-share-user { position: absolute; width: 117px; left: 139px; top: 0; text-align: left;}
.pop-share-text { display: block;}
.pop-share-user p.user-name { text-align: center; color: #F0E6D2; font-size: 14px; line-height: 24px; margin-top: 31px; font-weight: bold; height: 25px; overflow: hidden;}
.pop-share-bottom .home-info-box { float: left; padding-top: 41px; position: relative; color: #d6d4d2; font-style: italic; margin-left: 42px; width: 227px;}
.pop-share-bottom .home-info-box h5 { color: #d6d4d2; background-image: none; -webkit-text-fill-color: inherit; letter-spacing: 2px;}
.pop-share-bottom .home-info-box h5 span { background-image: linear-gradient(#e6d4a6, #c4a869); -webkit-background-clip: text; color: #af9b69; -webkit-text-fill-color: transparent;}
.pop-share-bottom .home-info-icon { top: 32px;}
.home-info-title { text-align: center;}
.home-info-title-single { padding-top: 49px;}
.pop-share-date { width: 100%; color: #a59a92; font-size: 13px; line-height: 27px; font-style: italic;}
.home-info-title p { margin: 0 auto; letter-spacing: 1px; color: #ffffff; font-size: 10px; font-weight: bold; line-height: 20px; text-shadow: 1px 1px 2px #000; font-style: italic;}
.pop-share-list { float: right; width: 232px; margin-top: 36px;}
.pop-share-list { width: 132px;}
.pop-share-list li { float: left; text-align: center; position: relative;}
.pop-share-list li.li1 { width: 110px;}
.pop-share-list li.li2 { width: 110px; display: none;}
.pop-share-list li:before { content: ""; width: 1px; height: 24px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/line.png) no-repeat 0 0; background-size: 100%; position: absolute; top: 8px; left: 0;}
.pop-share-list li:nth-child(1):before { display: none;}
.pop-share-list li h5 { color: #A09B8C; font-size: 16px; font-weight: bold; height: 24px; line-height: 24px; background-image: linear-gradient(#ffe78a, #fccf4e); -webkit-background-clip: text; color: #dfbd5d; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20); position: relative; z-index: 3;}
.pop-share-list li h5 span { font-size: 24px;}
.pop-share-list li p { color: #F0E6D2; font-size: 10px; line-height: 18px;}
.pop-share-line1 { display: none; position: absolute; left: -2px; top: 10px;}
.pop-share-qrcode { position: absolute; top: -98px; right: -154px; z-index: 4; text-align: center; padding-top: 4px; text-align: right; background: none; width: 154px !important; height: auto !important; padding: 0;}
.pop-share-qrcode h5 { font-size: 25px; font-weight: bold; text-align: center; padding-left: 25px; line-height: 40px; height: 50px; background-image: linear-gradient(#ffffd2, #ffd665); -webkit-background-clip: text; color: #dfbd5d; -webkit-text-fill-color: transparent; position: relative;}
.pop-share-qrcode div { width: 129px; height: 129px; margin: 0 0 7px auto; background-color: #fff; border: 2px solid #a58b51; border-image: linear-gradient(#fed886,#766128) 20 20;}
.pop-share-qrcode img { display: block; width: 100%; height: 100%; margin: 0 auto;}
.pop-share-qrcode p { width: 100%; text-align: center; line-height: 16px; color: #F0E6D2; font-size: 10px; padding-left: 25px;}
.pop-share-home .pop-share-layer1 { pointer-events: none; height: 169px; display: none;}
.pop-share-home .pop-share-layer { height: 188px;}

.pop-share-home .pop-share-cont:after { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,.85); position: absolute; z-index: 1; left: 0; top: 0;}

.pop-share-home .home-skin { position: absolute; overflow: hidden; z-index: 2; left: 0; top: 0; width: 100%; margin-left: 0;}
.pop-share-home .home-skin ul { margin-top: -76px; transform: scale(.73); transform-origin: top;}
.pop-share-home .home-skin li { margin: 0 3px; transform-origin: bottom; opacity: 1;}
.pop-share-home .home-skin li.big { transform: scale(1); margin-top: 38px;}
.pop-share-layer1 { top: 0; width: 100%; height: 169px; position: absolute; z-index: 3; left: 0; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/pop-share-layer1.png) no-repeat 0 0; background-size: 100% auto;}
.pop-share-home-pic { overflow: hidden; width: 100%; height: 100%;}
.pop-share-cont .home-skin li h5 { padding-top: 522px;}

.create-pop .home-skin { height: 120%; padding-top: 24%; margin-top: -8%;}
.create-pop .home-skin ul { margin-top: -50px;}
.create-pop .home-skin ul li { margin-top: -196px;}
.create-pop.pop-share-home .home-skin ul li.big { position: relative; transform: scale(.94); margin-top: -196px;}
.create-pop .home-skin li h5 { padding-top: 514px;}
.create-pop .home-skin li.big h5 { padding-top: 514px;}

.create-pop.pop-share-home .pop-share-cont { overflow: initial;}
.create-pop .pop-share-serie-s2 p { background-image: none; -webkit-text-fill-color: inherit;}
.create-pop .pop-share-serie-s1 span { background-image: none; -webkit-text-fill-color: inherit;}
.create-pop .pop-share-serie-item { height: 100%;}
.create-pop .pop-share-serie-item.inv { display: none;}
.create-pop.pop-share-serie .pop-share-layer { height: 188px;}
/*个人藏馆*/
.page-collection { position: absolute; z-index: 2; left: -100%; top: 0; width: 100%; height: 100%;}
.page-collection.on { left: 0;}
.page-collection:after{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,.9); position: absolute; z-index: 1; left: 0; top: 0;}
.collection-back { position: absolute; z-index: 9; top: 99px; right: 23px;}
.page-collection-roll { position: relative; z-index: 3; width: 954px; margin-left: 44px; overflow: hidden;}
.page-collection-roll li { width: 256px; height: 700px; margin: 0 31px; cursor: pointer; text-align: center; position: relative;}
.collection-list-pic { width: 100%; height: 625px; overflow: hidden; -webkit-mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/collection-list-mask.png); mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/collection-list-mask.png); -webkit-mask-size: 256px 625px; mask-size: 256px 625px;}
.collection-list-pic img { display: block; width: 100%; pointer-events: none;}
.collection-list-border { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/collection-list-border.png) no-repeat 0 0; background-size: 520px 625px; width: 256px; height: 625px; position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none;}
.page-collection-roll li:hover .collection-list-border { background-position: -261px 0;}
.collection-list-name { position: absolute; z-index: 4; width: 100%; left: 0; top: 517px; line-height: 26px; color: #f8eed9; font-size: 15px; font-weight: bold;}
.collection-list-name h5 { position: absolute; top: -200px; left: 0; width: 100%;}
.collection-list-name h5 a { display: inline-block; margin: 0; color: #f8eed9; text-decoration: underline;}
.collection-list-name a { display: block; margin: 20px auto 0;}
.collection-list-date { position: absolute; z-index: 4; left: 0; top: 643px; width: 100%;}
.collection-list-icon1 { display: block; margin: 0 auto;}
.collection-list-icon2 { display: none; margin: 0 auto; position: relative; z-index: 2;}
.collection-list-line { position: absolute; top: 6.5px; left: 50%; margin-left: -61px; z-index: 1; display: none;}
.page-collection-roll li:hover .collection-list-icon1 { display: none;}
.page-collection-roll li:hover .collection-list-icon2 { display: block;}
.page-collection-roll li:hover .collection-list-line { display: block;}
.collection-line { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/collection-line.png) no-repeat 0 0; width: 956px; height: 13px; background-size: 100% 100%; position: absolute; z-index: 2; left: 56px; top: 644px;}
.collection-list-date p { color: #b8b8b8; font-size: 13px; line-height: 35px;}
.page-collection-roll li:hover .collection-list-date p { color: #fff;}
.page-collection-arrow { position: absolute; width: 1014px; height: 0; left: 15px; top: 324px; z-index: 9;}
.page-collection-arrow a {display: block; width: 42px; height: 60px; padding-top: 5px;}
.page-collection-arrow a.swiper-button-disabled { visibility: hidden;}
.page-collection-arrow a em { display: block; margin: 0 auto;}
.page-collection-arrow a:active em { transform: scale(.9);}
.collection-prev { float: left;}
.collection-next { float: right;}
.page-collection-roll li.not:hover { cursor: default;}
.page-collection-roll li.not:hover .collection-list-border {  background-position: 0 0;}
.page-collection-roll li.not .collection-list-date p { color: #949494;}
.page-collection-roll li.not:hover .collection-list-icon1 { display: block;}
.page-collection-roll li.not:hover .collection-list-icon2 { display: none;}
.page-collection-roll li.not:hover .collection-list-line { display: none;}
/*皮肤详情*/
.page-details { position: absolute; z-index: 4; left: 0%; top: -100%; width: 100%; height: 100%;}
.page-details-top { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/page-details-top.png) no-repeat 0 0; background-size: 100% 100%; width: 100%; height: 26px; position: absolute; top: 75px; left: 0; z-index: 9;}
.page-details.on { top: 0;}
.page-details:after{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,.9); position: absolute; z-index: 1; left: 0; top: 0;}
.details-close { position: absolute; z-index: 9; top: -14px; right: 16px;}
.details-pic-cont { width: 100%; height: 100%; position: relative; z-index: 2;}
.details-pic-cont li { width: 100%; height: 100%; position: absolute; left: 0; top: 0; visibility: hidden;}
.details-pic-cont li.on { visibility: visible;}
.details-pic-cont li.on .details-pic-box { animation: fadeIn 1s both;}
.details-pic-cont li.on .details-pic-box .details-pic-info { animation: fadeIn 1s both;}
.details-pic-box { width: 100%; height: 100%; position: relative; padding-top: 80px; overflow: hidden;}
.details-pic-box img { display: block; width: 100%; height: auto;}
.details-pic-box video { position: absolute; width: 100%; height: auto; top: 80px; left: 0;}
.details-layer { position: absolute; z-index: 1; width: 100%; height: 400px; left: 0; bottom: 0; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/details-layer.png) no-repeat 0 0; background-size: 100% 100%;}
.details-pic-info { position: absolute; z-index: 3; width: 400px; top: 476px; left: 50%; margin-left: -200px; text-align: center;}
.details-pic-info .comm-tag { height: 85px; margin: 0 auto;}
.details-pic-box .details-pic-info .comm-tag img { height: 100%; width: auto; margin: 0 auto;}
.details-pic-info p { line-height: 26px; z-index: 2; color: #F0E6D2; font-size: 16px; text-align: center; margin-top: -3px; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.30); font-weight: bold;}
.details-pic-info h5 { font-weight: bold; font-size: 11px; line-height: 19px; background-image: linear-gradient(#dfc67d, #cea83b); -webkit-background-clip: text; color: #E5D197; -webkit-text-fill-color: transparent; color: #d5b55a; display: none;}
.details-info { position: absolute; z-index: 3; left: 30px; top: 578px; width: 200px;}
.details-info p { line-height: 30px; color: #969085; font-size: 13px;}
.details-info p em { display: block; float: left; margin-top: 9px; margin-right: 5px;}
.details-info p span { color: #f0e5d1;}
.details-btn-gray,.details-btn-light { display: block; margin-top: 37px; text-align: center; line-height: 34px; font-size: 15px; font-weight: bold;}
.details-btn-gray { color: #5c5b57;}
.details-btn-light { color: #d1c492;}
.details-share { position: absolute; top: 69px; left: 960px;}
.details-pic-foot { width: 100%; height: 103px; border-top: 1px solid #89662b; position: absolute; z-index: 5; left: 0; bottom: 0; pointer-events: none;}
.details-pic-roll { width: 506px; margin: 0 auto; height: 100%; overflow: hidden; pointer-events: all;}
.details-pic-roll ul { position: relative;}
.details-pic-roll li { cursor: pointer; width: 86px; height: 48px; border: 3px solid #3c3c41; margin: 20px 5px 0; position: relative;}
.details-pic-over { width: 100%; height: 100%; overflow: hidden; position: relative; border: 1px solid #080a0b;}
.details-pic-over img { display: block; width: 110%; margin-left: -5%;}
.details-pic-roll li.swiper-slide-active { border-color: #fbf0d9; border-image: linear-gradient(#85652a,#c8a868) 2 2; width: 114px; height: 64px; margin: 13px 5px 0;}
.details-pic-roll li.swiper-slide-active .details-pic-over { width: 100%; height: 100%;}
.details-pic-roll li:hover { border-color: #fbf0d9; border-image: linear-gradient(#85652a,#c8a868) 2 2;}
.page-details-arrow { position: absolute; width: 590px; height: 0; left: 50%; margin-left: -295px; top: 14px; z-index: 9; pointer-events: all;}
.page-details-arrow a {display: block; width: 38px; height: 64px; padding-top: 12px;}
.page-details-arrow a em { display: block; margin: 0 auto;}
.page-details-arrow a:active em { transform: scale(.9);}
.details-prev { float: left;}
.details-next { float: right;}
.details-icon-lock { position: absolute; top: 35px; left: 50%; margin-left: -11px; transform: scale(.5); transform-origin: center top;}
.details-pic-roll li.swiper-slide-active .details-icon-lock { transform: scale(1); top: 50%; margin-top: -16px;}
/*anim*/
.home-info { animation: fadeIn 1s ease both;}
@keyframes fadeInDown1 {
    0% {
        opacity: 0;
        transform: translate3d(0,-100%,0) scale(.94)
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0) scale(.94)
    }
}
.page-home .home-skin li.complete { animation: fadeInDown1 1s ease .2s both;}
.page-home .home-skin li.complete:nth-child(2) { animation: fadeInDown 1.1s ease .2s both;}
.page-nav-box { animation: fadeIn 1s ease both;}
/*移动端*/
.comm-create { position: fixed; top: 0; left: -999px; z-index: -999; width: 810px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.comm-create *{ -webkit-box-sizing: border-box; box-sizing: border-box;}
.dom2img-result { width: 100%; display: block;}
.comm-create .pop-share-bottom .home-info-box h5 span { background-image: none; -webkit-text-fill-color: inherit;}
.comm-create .pop-share-list li h5 { background-image: none; -webkit-text-fill-color: inherit;}
.header { width: 900px;}
.hide-menu .header { display: none;}
/*通用弹窗*/
.dialog-normal { -webkit-transform: scale(.85); transform: scale(.85); background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/dialog-normal.png) no-repeat 0 0; background-size: 100% 100%; width: 452px; height: 172px;}
.dialog-normal__content { padding-top: 65px;}
.dialog__normal__txt { color: #d4d3cb; height: 63px; font-size: 14px; line-height: 20px; width: 90%; margin: 0 auto; text-align: center;}
.dialog-normal__wrapper a { display: block; margin: 0 auto; color: #d1c492; font-size: 0; text-indent: -999px; overflow: hidden; font-weight: bold; line-height: 37px; position: relative;}
.dialog-normal__wrapper a:hover:after { content: ""; position: absolute; left: 5px; top: 3px; width: 67px; height: 28px; border: 2px solid #fbf0d9; border-image: linear-gradient(#fbf0d9,#d1a443) 2 2;}
.dialog-normal .dialog-frame-button { bottom: 3.5px;}
/*兼容商城*/
.shop .wrapper { top: -80px;}
.shop .header { display: none;}
.shop .page-home::before,.shop .page-colorful::before,.shop .page-collection::before,.shop .page-details::before,.shop .first-video::before,.shop .first-kv::before { display: none;}
.shop .pop-comm { top: 55%;}
.shop .page-details-top { background: none; top: 99px;}
.shop .details-close { top: 2px; right: 26px; transform: scale(1.16);}
.shop .store-back { display: block;}
/*0201 详情页查看全屏*/
.details-spr{ background-image:url(//game.gtimg.cn/images/lol/act/a20230715chromahub/details-spr.png); background-repeat:no-repeat; background-size:205px 165px;}
.details-spr.details-full:hover{ width:30px; height:30px; background-position:97.42857% 28.51852%;}
.details-spr.details-full:active{ width:30px; height:30px; background-position:97.42857% 3.33333%;}
.details-spr.details-full{ width:30px; height:30px; background-position:97.42857% 53.7037%;}
.details-spr.store-back:hover{ width:162px; height:76px; background-position:10.46512% 5.05618%;}
.details-spr.store-back{ width:162px; height:76px; background-position:10.46512% 94.94382%;}

.details-share { transform: scale(.88); left: 920px;}
.details-full { position: absolute; top: 72px; left: 971px;}
.page-details .details-layer,.page-details .details-info,.page-details .details-pic-foot,.page-details .page-details-top { opacity: 1; transition: all .3s linear;}
.page-details.full .details-layer,.page-details.full .details-info,.page-details.full .details-pic-foot,.page-details.full .page-details-top { opacity: 0;}
.page-details.full .details-pic-box p { display: none;}
.store-back { display: none; position: absolute; z-index: 9; top: 80px; left: 10px;}
.page-colorful-scroll .store-back { top: -1px;}

.comm-tag { width: 100%;}
.home-skin li .comm-tag img { display: block; margin: 0 auto; width: auto; height: 100%; border-radius: 0;}
.home-skin li .comm-tag { height: 60px; position: absolute; z-index: 5; left: 0; top: 450px;}
.colorful-left { width: 188px; position: absolute; z-index: 8; left: 0; top: 0; height: 100%; background-color: #050d14; border-right: 2px solid #1b292a;}
.colorful-tabs { padding-top: 126px; width: 100%; height: 126px; padding-left: 10px;}
.colorful-tabs a { display: none !important; float: left; text-align: center; width: 73px; line-height: 36px; height: 36px; color: #CDBE91; font-size: 14px; transition: all .3s ease; border-bottom: 2px solid #050d14;}
.colorful-tabs a:nth-child(1) { margin-right: 20px;}
.colorful-tabs a.cur { border-bottom: 2px solid #ca9d3c; color: #F0E6D2; font-weight: bold;}
.colorful-tabs a:hover { border-bottom: 2px solid #ca9d3c; color: #F0E6D2;}
.colorful-tabs.colorful-tabs-rare { padding-left: 52px;}
.colorful-tabs.colorful-tabs-rare a { display: none;}
.colorful-tabs.colorful-tabs-rare a.cur { display: block;}
.colorful-left-list { margin-top: 10px;}
.colorful-left-item { display: none; width: 100%;}
.colorful-left-scroll { width: 100%; height: 454px; overflow-y: auto;}
.colorful-left-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px; 
}
.colorful-left-scroll::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.colorful-left-scroll::-webkit-scrollbar-corner { 
  display: block; 
}
.colorful-left-scroll::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #68521f; 
  border-radius: 4px; 
}
.colorful-left-scroll a { display: block; width: 100%; height: 48px; line-height: 48px; color: #CDBE91; font-size: 12px; position: relative; transition: all .3s ease; overflow: hidden;}
.colorful-left-scroll a em { position: absolute; left: 0; top: -4px; opacity: 0; transition: all .3s ease;}
.colorful-left-scroll p { float: left;}
.colorful-left-scroll p.p1 { width: 106px; margin-right: 14px; margin-left: 16px;}
.colorful-left-scroll p.p2 { width: 44px; color: #A09B8C; font-size: 10px; letter-spacing: 1px; font-weight: bold;}
.colorful-left-scroll p.p2 span { font-size: 12px; color: #CDBE91; transition: all .3s ease;}
.colorful-left-scroll a:hover { color: #F0E6D2;}
.colorful-left-scroll a:hover em { opacity: .4;}
.colorful-left-scroll a:hover p.p2 span { color: #F0E6D2;}
.colorful-left-scroll a.cur { color: #F0E6D2;}
.colorful-left-scroll a.cur em { opacity: 1;}
.colorful-left-scroll a.cur p.p2 span { color: #F0E6D2;}
.colorful-left-bot { width: 100%; line-height: 22px; text-align: center; color: #938f81; font-size: 0; text-align: center;}
.colorful-left-bot p { font-size: 12px; display: inline-block; vertical-align: top; cursor: pointer;}
.colorful-left-bot em { display: inline-block; vertical-align: top; margin: 6px 6px 0; cursor: pointer;}
.colorful-right { float: right; width: 867px; height: 100%; padding-top: 80px;}
.colorful-right-item { width: 100%; height: 100%; display: none;}
.colorful-rare-top { width: 100%; height: 165px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/colorful-rare-top.png) no-repeat 0 0; background-size: 100% 100%; padding-top: 44px; padding-left: 40px;}
.colorful-rare-info { float: left; width: 90px; height: 100%; text-align: center;}
.colorful-rare-info p.p1 { padding-top: 17px; line-height: 20px; font-size: 10px; color: #F0E6D2;}
.colorful-rare-info p.p2 { font-weight: bold; line-height: 28px; height: 28px; font-size: 28px; background-image: linear-gradient(#ffe78a, #fccf4e); -webkit-background-clip: text; color: #dfbd5d; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.colorful-rare-info p.p2 span { font-size: 20px;}
.colorful-rare-info p.p3 { font-weight: bold; line-height: 24px; font-size: 14px; color: #F0E6D2; margin-top: 4px; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.colorful-rare-reward { float: left; position: relative; width: 677px; margin-left: 16px; height: 121px;}
.colorful-right-prog-bar { position: absolute; z-index: 1; width: 671px; height: 4px; left: 3px; top: 81px;}
.colorful-right-prog-bar em { display: none; transition: all .3s; width: 0; height: 100%; background-color: #44909e; border: 1px solid #74b4bc; box-shadow: inset 0 0 2px #74b4bc; border-radius: 4px;}
.colorful-rare-reward ul { width: 100%; margin-left: 1px; margin-top: -6px;}
.colorful-rare-reward li { cursor: pointer; float: left; width: 134px; height: 131px; position: relative;}
.colorful-rare-hl { display: none; position: absolute; left: 50%; margin-left: -72px; bottom: 0; z-index: 1;}
.colorful-rare-top-pic { position: relative; z-index: 1; left: 1.5px; z-index: 2; width: 80px; height: 80px; position: relative; margin: 0 auto 20px;}
.colorful-rare-top-pic img { display: block; width: 80px; height: 80px;}
.colorful-rare-headbox { position: absolute; z-index: 3; top: -2px; left: -2px; display: none;}
.colorful-rare-headbox:before { content: ""; width: 98px; height: 98px; position: absolute; top: 50%; left: 50%; margin: -49px 0 0 -49px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/colorful-rare-bar-hl1.png) no-repeat 0 0; background-size: 100% 100%; display: none;}
.colorful-rare-headbox-done { position: absolute; z-index: 3; top: -2px; left: -2px;}
.colorful-rare-top-icon { position: absolute; z-index: 3; top: 69.5px; left: 50%; margin-left: -18.5px; width: 37px; height: 36px;}
.colorful-rare-top-icon em { display: none; position: relative;}
.colorful-rare-top-icon em.colorful-rare-unlock { display: block;}
.colorful-rare-get:before { content: ""; position: absolute; width: 40px; height: 40px; top: 50%; left: 50%; margin: -20px 0 0 -20px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/colorful-rare-bar-hl2.png) no-repeat 0 0; background-size: 100% 100%;}
.colorful-rare-top-num { line-height: 20px; color: #A09B8C; font-size: 12px; text-align: center; position: relative;}
.colorful-rare-hover { display: none; width: 244px; height: 127px; position: absolute; bottom: -102px; left: 50%; margin-left: -122px; transform: scale(.8); z-index: 10; text-align: center;}
.colorful-rare-hover .page-colorful-list-hover { display: block; transform: rotate(180deg); position: absolute; margin: 0 !important; left: 0 !important; top: 0 !important; z-index: 1;}
.colorful-rare-hover h5 { color: #a67315; font-size: 14px; line-height: 25px; padding: 26px 0 18px; position: relative; z-index: 2;}
.colorful-rare-hover p { color: #fff6e0; font-size: 14px; line-height: 22px; position: relative; z-index: 2; font-weight: bold;}
.colorful-rare-reward li.highlight .colorful-rare-top-icon em { display: none;}
.colorful-rare-reward li.highlight .colorful-rare-top-icon em.colorful-rare-get { display: block;}
.colorful-rare-reward li.highlight .colorful-rare-headbox:before { display: block;}
.colorful-rare-reward li.highlight .colorful-rare-top-pic .colorful-rare-headbox { display: block;}
.colorful-rare-reward li.highlight .colorful-rare-top-pic .colorful-rare-headbox-done { display: none;}
.colorful-rare-reward li.done .colorful-rare-hl { display: none;}
.colorful-rare-reward li.done .colorful-rare-top-icon em { display: none;}
.colorful-rare-reward li.done .colorful-rare-top-icon em.colorful-rare-done { display: block;}
.colorful-rare-reward li.done .colorful-rare-headbox { display: none;}
.colorful-rare-reward li.done .colorful-rare-top-pic .colorful-rare-headbox { display: none;}
.colorful-rare-reward li.done .colorful-rare-top-pic .colorful-rare-headbox-done { display: block;}
.colorful-rare-reward li.done .colorful-rare-top-pic:before { content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); position: absolute; z-index: 1; left: 0; top: 0;}

.colorful-rare-reward li:hover .colorful-rare-hl { display: block;}
.colorful-rare-reward li:hover .colorful-rare-hover { display: block;}
.colorful-rare-scroll { position: relative; width: 859px; height: 473px; overflow-y: auto; padding: 32px 0 60px 0;}
.colorful-rare-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px; 
}
.colorful-rare-scroll::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.colorful-rare-scroll::-webkit-scrollbar-corner { 
  display: block; 
}
.colorful-rare-scroll::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #68521f; 
  border-radius: 4px; 
}
.colorful-series-box { width: 100%; height: 581px; position: relative; overflow: hidden;}
.series-pic { width: 100%; height: 100%; position: relative; opacity: 0; transition: all .3s linear;}
.series-pic.on { opacity: 1;}
.series-pic:before { content: ""; z-index: 3; width: 100%; height: 100%; position: absolute; z-index: 1; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-mask3.png) no-repeat 0 0; background-size: 100% 100%;}
.series-pic-cont { width: 100%; height: 100%; position: relative; overflow: hidden; -webkit-mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-mask1.png);-webkit-mask-repeat: no-repeat; mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-mask1.png); mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; filter: blur(8px) saturate(40%);}
.series-pic-item { position: relative; width: 100%; height: 426px; overflow: hidden;}
.series-pic-item.inv { position: absolute; top: 426px; transform: rotateX(180deg);}
.series-pic img { display: block; width: 100%; height: auto;}
.top-light { position: absolute; z-index: 4; width: 867px; height: 426px; top: 0; left: 50%; margin-left: -433px;}
.top-light em { display: block; width: 100%; height: 100%; -webkit-mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-mask2.png);-webkit-mask-repeat: no-repeat; mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-mask2.png); mask-repeat: no-repeat; -webkit-mask-size: 100% 100%;}

.series-name { position: absolute; z-index: 9; width: 600px; top: 26px; left: 50%; margin-left: -300px; text-align: center;}
.series-name h5 { color: #F0E6D2; font-size: 18px; line-height: 30px; font-weight: bold;}
.series-name p { color: #A09B8C; font-size: 12px; line-height: 16px; font-weight: bold;}
.series-name p span { color: #F0E6D2; font-size: 14px;}
.series-swiper { width: 100%; height: 100%; position: absolute; z-index: 7; left: 0; top: 0; padding-top: 108px; overflow: hidden; padding-left: 62px;}
.series-swiper li { width: 216px; height: 360px; position: relative; margin: 0 16px; cursor: pointer;}
.series-center ul { font-size: 0; text-align: center; padding-left: 0;}
.series-center li { display: inline-block; vertical-align: top;}
.series-li-shadow { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-li-shadow.png) no-repeat 0 0; background-size: 100% 100%; width: 100%; height: 100%; position: absolute; z-index: 2; pointer-events: none; top: 0; left: 0;}
.series-skin-box { position: relative; z-index: 3; top: 0; transition: all .3s linear;}
.series-pic-box { position: relative; z-index: 1; width: 214px; height: 358px; overflow: hidden; left: 1px; top: 1px;}
.series-pic-box img { display: block; width: auto; height: 100%; margin-left: -9px;}
.series-skin-box .comm-tag { height: 85px; position: absolute; z-index: 5; left: 0; top: 258px;}
.series-skin-box .comm-tag img { display: block; margin: 0 auto; width: auto; height: 100%; border-radius: 0;}
.series-skin-info { position: absolute; z-index: 5; top: 378px; left: 50%; margin-left: -104px; text-align: center; opacity: 0; transition: all .3s;}
.series-skin-info h5 { padding-top: 18px; line-height: 20px; color: #F0E6D2; font-size: 12px;}
.series-skin-info p { line-height: 14px; color: #A09B8C; font-size: 10px;}
.series-skin-info p span { color: #A09B8C; font-weight: bold;}
.series-skin-info-inv { position: absolute; top: 94px; left: 0;}
.series-li-mask1 { width: 216px; height: 360px; position: absolute; z-index: 2; left: 0; top: 0; -webkit-mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-li-mask1.png); -webkit-mask-repeat: no-repeat; mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-li-mask1.png); mask-repeat: no-repeat; -webkit-mask-size: 100% 100%;}
.series-li-mask1 em { display: block; width: 100%; height: 100%;}
.series-skin-box-inv { z-index: 1; transform: rotateX(180deg); width: 218px; height: 362px; padding: 0 1px; filter: blur(2px); -webkit-mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-li-mask2.png); -webkit-mask-repeat: no-repeat; mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-li-mask2.png); mask-repeat: no-repeat; pointer-events: none; -webkit-mask-size: 100% 100%; left: -1px; top: -1px;}
.series-skin-box-inv:before { content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); position: absolute; z-index: 9; left: 0; top: 0;}
.series-swiper li .colorful-rare-unlock { position: absolute; left: 50%; margin-left: -18px; bottom: -19.5px; z-index: 7; pointer-events: none; display: none;}
.series-skin-layer { position: absolute; z-index: 1; width: 256px; height: 579px; top: -108px; left: 50%; margin-left: -128px; -webkit-mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-li-mask3.png); -webkit-mask-repeat: no-repeat; mask-image: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-li-mask3.png); -webkit-mask-size: 100% 100%; opacity: 0; transition: all .3s;}
.series-skin-layer:before { display: none; content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/series-li-mask3.png) no-repeat 0 0; background-size: 100% 100%;}
.series-skin-layer em { display: block; width: 100%; height: 100%;}
.series-swiper li:hover .series-skin-info { opacity: 1; top: 366px;}
.series-swiper li:hover .series-skin-box { top: -12px;}
.series-swiper li:hover .series-skin-box-inv { top: 12px;}
.series-swiper li:hover .series-skin-layer { opacity: 1;}
.series-swiper li.lock .series-skin-box:before { content: ""; pointer-events: none; width: 214px; height: 358px; background-color: rgba(0,0,0,0.7); position: absolute; left: 1px; top: 1px; z-index: 6;}
.series-swiper li.lock .colorful-rare-unlock { display: block;}
.series-share { position: absolute; z-index: 9; top: 99px; right: 23px;}

.series-color1 em.col { background-color: #4b6175;}
.series-color2 em.col { background-color: #3a363c;}
.series-color3 em.col { background-color: #7a5b51;}
.series-color4 em.col { background-color: #84739e;}
.series-color5 em.col { background-color: #73726f;}
.series-color6 em.col { background-color: #7b574b;}
.series-color7 em.col { background-color: #6c584d;}
.series-color8 em.col { background-color: #7877b2;}
.series-color9 em.col { background-color: #948277;}
.series-color10 em.col { background-color: #37314d;}
.series-color11 em.col { background-color: #6b5245;}
.series-color12 em.col { background-color: #5b4148;}
.series-color13 em.col { background-color: #573d3f;}
.series-color14 em.col { background-color: #8c7a84;}
.series-color15 em.col { background-color: #58424b;}
.series-color16 em.col { background-color: #493837;}
.series-color17 em.col { background-color: #6b5e6d;}
.series-color18 em.col { background-color: #655a62;}
.series-color19 em.col { background-color: #674479;}
.series-color20 em.col { background-color: #4c5776;}
.series-color21 em.col { background-color: #475078;}
.series-color22 em.col { background-color: #5c5171;}
.series-color23 em.col { background-color: #8b7e91;}
.series-color24 em.col { background-color: #454451;}
.series-color25 em.col { background-color: #6f5399;}
.series-color26 em.col { background-color: #7590a9;}
.series-color27 em.col { background-color: #9a7d9a;}
.series-color28 em.col { background-color: #848675;}
.series-color29 em.col { background-color: #604d44;}
.series-color30 em.col { background-color: #7e82ad;}
.series-color31 em.col { background-color: #7d7e99;}
.series-color32 em.col { background-color: #6c5659;}
.series-color33 em.col { background-color: #73745a;}
.series-color34 em.col { background-color: #3d434b;}
.series-color35 em.col { background-color: #71615e;}
.series-color36 em.col { background-color: #4f4864;}
.series-color37 em.col { background-color: #8e6b75;}
.series-color38 em.col { background-color: #77505f;}
.series-color39 em.col { background-color: #443b50;}
.series-color40 em.col { background-color: #af8f99;}
.series-color41 em.col { background-color: #735d61;}
.series-color42 em.col { background-color: #4c4148;}
.series-color43 em.col { background-color: #957994;}
.series-color44 em.col { background-color: #3f292d;}
.series-color45 em.col { background-color: #92786d;}
.series-color46 em.col { background-color: #917481;}
.series-color47 em.col { background-color: #6f665d;}
.series-color48 em.col { background-color: #9b7970;}
.series-color49 em.col { background-color: #7ea0ac;}
.series-color50 em.col { background-color: #5e4d39;}
.series-color51 em.col { background-color: #594366;}
.series-color52 em.col { background-color: #7b7a71;}
.series-color53 em.col { background-color: #495962;}
.series-color54 em.col { background-color: #603f36;}
.series-color55 em.col { background-color: #51484a;}
.series-color56 em.col { background-color: #4f3f44;}
.series-color57 em.col { background-color: #a481ac;}
.series-color58 em.col { background-color: #58493f;}
.series-color59 em.col { background-color: #929395;}
.series-color60 em.col { background-color: #998a94;}
.series-color61 em.col { background-color: #6a8fa9;}
.series-color62 em.col { background-color: #845d68;}
.series-color63 em.col { background-color: #926a88;}
.series-color64 em.col { background-color: #816b83;}
.series-color65 em.col { background-color: #8d6a66;}
.series-color66 em.col { background-color: #3d324a;}
.series-color67 em.col { background-color: #614053;}
.series-color68 em.col { background-color: #4e4448;}
.series-color69 em.col { background-color: #897465;}
.series-color70 em.col { background-color: #887280;}
.series-color71 em.col { background-color: #967c85;}
.series-color72 em.col { background-color: #6b6575;}
.series-color73 em.col { background-color: #525254;}
.series-color74 em.col { background-color: #78738b;}
.series-color75 em.col { background-color: #875f53;}
.series-color76 em.col { background-color: #887971;}
.series-color77 em.col { background-color: #c3a397;}
.series-color78 em.col { background-color: #806b89;}
.series-color79 em.col { background-color: #6b4e54;}
.series-color80 em.col { background-color: #77594c;}
.series-color81 em.col { background-color: #5e463b;}
.series-color82 em.col { background-color: #a2a8a4;}
.series-color83 em.col { background-color: #b4afbb;}
.series-color84 em.col { background-color: #dbcdce;}
.series-color85 em.col { background-color: #b9a9a9;}
.series-color86 em.col { background-color: #bfb6b4;}
.series-color87 em.col { background-color: #ab9488;}
.series-color88 em.col { background-color: #9a92aa;}
.series-color89 em.col { background-color: #b0abad;}
.series-color90 em.col { background-color: #a88f97;}
.series-color91 em.col { background-color: #958b80;}
.series-color92 em.col { background-color: #918a8a;}
.series-color93 em.col { background-color: #767888;}
.series-color94 em.col { background-color: #c2afa4;}
.series-color95 em.col { background-color: #8b8687;}
.series-color96 em.col { background-color: #444759;}
.series-color97 em.col { background-color: #8c7085;}
.series-color98 em.col { background-color: #938e8c;}
.series-color99 em.col { background-color: #b3a1a5;}
.series-color100 em.col { background-color: #aca7a2;}
.series-color101 em.col { background-color: #aea8b3;}
.series-color102 em.col { background-color: #9d8e7e;}
.series-color103 em.col { background-color: #ae9396;}
.series-color104 em.col { background-color: #a99a98;}
.series-color105 em.col { background-color: #777986;}
.series-color106 em.col { background-color: #7b9ca9;}
.series-color107 em.col { background-color: #9a8f94;}
.series-color108 em.col { background-color: #948b80;}
.series-color109 em.col { background-color: #887dac;}
.series-color110 em.col { background-color: #a280a9;}
.series-color111 em.col { background-color: #a78384;}
.series-color112 em.col { background-color: #9e7ea9;}
.series-color113 em.col { background-color: #c9c4c3;}
.series-color114 em.col { background-color: #bab1ae;}
.series-color115 em.col { background-color: #c7c2c6;}
.series-color116 em.col { background-color: #7c5454;}
.series-color117 em.col { background-color: #7e6c72;}
.series-color118 em.col { background-color: #8a757b;}
.series-color119 em.col { background-color: #c6b5bf;}
.series-color120 em.col { background-color: #6e4d4d;}
.series-color121 em.col { background-color: #b08e77;}
.series-color122 em.col { background-color: #9a756d;}
.series-color123 em.col { background-color: #534b68;}
.series-color124 em.col { background-color: #5b5a5f;}
.series-color125 em.col { background-color: #58637f;}
.series-color126 em.col { background-color: #58637f;}
.series-color127 em.col { background-color: #998d7c;}
.series-color128 em.col { background-color: #776575;}
.series-color129 em.col { background-color: #7b7f7a;}
.series-color130 em.col { background-color: #5b6a85;}
.series-color131 em.col { background-color: #5f5653;}
.series-color132 em.col { background-color: #9386a2;}
/*ranking*/
.ranking-left { padding-top: 130px; float: left; width: 390px; position: relative;}
.ranking-left-tips { position: absolute; right: 33px; top: 135px; color: #938f81; font-size: 12px; text-align: right; line-height: 20px;}
.ranking-select { float: none; margin-left: 45px; position: relative; z-index: 3;}
.ranking-select-server { position: absolute; top: 56px; left: 159px; border-top: 1px solid #443614; display: none;}
.comm-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px; 
}
.comm-scroll::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.comm-scroll::-webkit-scrollbar-corner { 
  display: block; 
}
.comm-scroll::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #68521f; 
  border-radius: 4px; 
}
.ranking-select-server ul { top: 0; max-height: 336px; overflow-y: auto;}
.ranking-select-arrow { position: absolute; top: 5px; right: 14px;}
.hide-friend .ranking-select-li-friend { display: none;}
.hide-friend .ranking-select-server { top: 29px;}
.ranking-left-list { width: 100%; text-align: center; margin-top: 13px; position: relative; z-index: 1;}
.ranking-left-list li { width: 100%; position: relative;}
.ranking-left-list div.p1 { width: 45px; margin-left: 36px; float: left;}
.ranking-left-list div.p2 { width: 218px; float: left;}
.ranking-left-list div.p3 { width: 66px; float: left;}
.ranking-left-th { width: 100%; height: 22px; line-height: 22px; font-size: 12px; color: #A09B8C; letter-spacing: 1px; position: relative;}
.ranking-left-th:after { content: ""; width: 90%; height: 1px; background: linear-gradient(270deg, rgba(29, 40, 47, 0.00) 0%, #1d282f 35.59%, #1d282f 64.21%, rgba(29, 40, 47, 0.00) 100%); position: absolute; left: 5%; bottom: -1px;}
.ranking-left-td { width: 100%; margin-top: 8px; height: 368px; overflow-y: auto; overflow-x: hidden;}
.ranking-left-td li { height: 56px; cursor: pointer;}
.ranking-left-td div.p1 { color: #A09B8C; font-size: 18px; font-weight: bold; height: 56px; line-height: 56px; position: relative; z-index: 3;}
.ranking-left-td div.p2 { height: 56px; line-height: 56px; font-size: 0; text-align: center; position: relative; z-index: 3;}
.ranking-left-td div.p3 { color: #A09B8C; font-size: 18px; font-weight: bold; height: 56px; line-height: 56px; background-image: linear-gradient(#ffe78a, #fccf4e); -webkit-background-clip: text; color: #dfbd5d; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20); position: relative; z-index: 3;}
.ranking-left-head { width: 42px; height: 40px; display: inline-block; vertical-align: top; position: relative; margin: 8px 8px 0;}
.ranking-left-head .home-info-head { position: absolute; top: 50%; left: 50%; margin: -73px 0 0 -73px; transform: scale(.22);}
.ranking-left-name { display: inline-block; vertical-align: top; color: #F0E6D2; font-size: 12px; width: 144px; text-align: left; padding-left: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ranking-left-hl { position: absolute; left: -2px; top: -5px; opacity: 0; transition: all .3s;}
.ranking-left-td li:hover .ranking-left-hl { opacity: .4;}
.ranking-left-td li.cur .ranking-left-hl { opacity: 1;}
.ranking-left-td li:nth-child(1) div.p1 { background-image: linear-gradient(#ffde52, #bb9b39); -webkit-background-clip: text; color: #b59537; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.ranking-left-td li:nth-child(2) div.p1 { background-image: linear-gradient(#ffffff, #c4c4c4); -webkit-background-clip: text; color: #c1c1c1; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.ranking-left-td li:nth-child(3) div.p1 { background-image: linear-gradient(#fdb088, #b77d61); -webkit-background-clip: text; color: #c48668; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.ranking-left-my { margin-top: 0; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/ranking-left-my.png) no-repeat 0 0; background-size: 100% 100%; width: 392px; height: 56px; overflow: hidden; pointer-events: none;}
.ranking-left-my li div.p0 { position: absolute; background-color: #2b3336; color: #A09B8C; font-size: 10px; width: 18px; height: 18px; top: 20px; left: 15px;}
.ranking-left-my li div.p1.num1 { background-image: linear-gradient(#ffde52, #bb9b39); -webkit-background-clip: text; color: #b59537; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.ranking-left-my li div.p1.num2 { background-image: linear-gradient(#ffffff, #c4c4c4); -webkit-background-clip: text; color: #c1c1c1; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.ranking-left-my li div.p1.num3 { background-image: linear-gradient(#fdb088, #b77d61); -webkit-background-clip: text; color: #c48668; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.ranking-left-my li div.p1.num4 { background-image: none; -webkit-text-fill-color: inherit; color: #A09B8C;}
.ranking-right-box { width: 610px; height: 508px; float: left; margin-top: 118px; position: relative; margin-left: 10px; padding-top: 5px;}
.dialog-frame-button { left: 0; bottom: 3px; -webkit-box-sizing: content-box; box-sizing: content-box;}
.dialog-frame-button * { -webkit-box-sizing: content-box; box-sizing: content-box;}
.ranking-right-bg { width: 606px; height: 502px; margin: 0 auto; overflow: hidden; position: relative;}
.ranking-right-bg img { display: block; width: auto; height: 100%; margin-left: -107px; position: relative; z-index: 1; filter: blur(6px);}
.ranking-right-bg:before { content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); position: absolute; z-index: 2; left: 0; top: 0;}
.ranking-right-layer { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/ranking-right-layer.png) no-repeat 0 0; background-size: 100% 100%; width: 606px; height: 502px; position: absolute; z-index: 4; left: 4px; top: 5px; pointer-events: none; opacity: .7;}
.ranking-right-border { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/ranking-right-border.png) no-repeat 0 0; background-size: 100% 100%; width: 610px; height: 508px; position: absolute; z-index: 9; left: 0; top: 0; pointer-events: none;}
.ranking-right-skin { width: 606px; height: 502px; overflow: hidden; position: absolute; z-index: 3; left: 2px; top: 5px;}
.ranking-right-skin .home-skin { margin-left: 0; margin-top: -60px; transform: scale(.72); transform-origin: center top; margin-left: -54px;}
.ranking-right-skin .home-skin li { opacity: 1;}
.ranking-right-skin .home-skin li.big { transform: scale(1);}
.ranking-right-skin .home-skin li h5 { padding-top: 522px;}
.ranking-right-skin .home-skin li .comm-tag { top: 455px;}
.ranking-right-info { position: absolute; left: 0; bottom: 0; z-index: 5; width: 100%; height: 96px;}
.ranking-right-head { width: 84px; height: 80px; margin: -22px 8px 0 30px; position: relative; float: left}
.ranking-right-head .home-info-head { position: absolute; top: 50%; left: 50%; margin: -73px 0 0 -73px; transform: scale(.45);}
.ranking-right-use { float: left; width: 126px; padding-top: 4px;}
.ranking-right-use h5 { color: #F0E6D2; font-size: 14px; line-height: 20px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ranking-right-use p { color: #A09B8C; font-size: 10px; line-height: 18px;}
.ranking-right-list { float: left; width: 360px;}
.ranking-right-list li { float: left; text-align: center; position: relative; padding: 0 6px; white-space: nowrap;}
.ranking-right-list li:before { content: ""; width: 1px; height: 24px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/line.png) no-repeat 0 0; background-size: 100%; position: absolute; top: 8px; left: 0;}
.ranking-right-list li:nth-child(1):before { display: none;}
.ranking-right-list li h5 { color: #A09B8C; font-size: 16px; font-weight: bold; height: 24px; line-height: 24px; background-image: linear-gradient(#ffe78a, #fccf4e); -webkit-background-clip: text; color: #dfbd5d; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20); position: relative; z-index: 3;}
.ranking-right-list li h5 span { font-size: 24px;}
.ranking-right-list li p { color: #F0E6D2; font-size: 10px; line-height: 18px;}
.ranking-right-select { position: absolute; bottom: -30px; right: 0; font-size: 0; text-align: right; line-height: 22px;}
.ranking-right-select p,.ranking-right-select em { display: inline-block; vertical-align: top;}
.ranking-right-select p{ color: #938f81; font-size: 12px;}
.ranking-right-select em { margin: 6px 6px 4px 0; cursor: pointer;}
.guest-bar { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/guest-bar.png) no-repeat 0 0; background-size: 100% 100%; width: 572px; height: 44px; position: absolute; top: 80px; left: 50%; margin-left: -286px; z-index: 9; line-height: 32px; text-align: center; color: #F0E6D2; font-size: 12px;}
.guest-bar span { background-image: linear-gradient(#ffe78a, #fccf4e); -webkit-background-clip: text; color: #dfbd5d; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20); font-weight: bold; font-size: 18px; margin: 0 20px 0 8px;}
.guest-bar em { opacity: .3; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 23.30%, #FFF 75.38%, rgba(255, 255, 255, 0.00) 100%); width: 1px; height: 20px; display: inline-block; vertical-align: top; margin: 6px 14px 0 0;}
.page-item-guest .page-home .home-skin { margin-top: 20px;}
.page-item-guest .colorful-rare-scroll { padding-top: 48px; height: 639px;}
.page-item-guest .page-colorful-skin-list li { pointer-events: none;}
.page-item-guest .series-name { top: 40px;}
.page-item-guest .series-swiper li { pointer-events: none;}
.pop-share-serie-pic { width: 100%; height: 100%; overflow: hidden; position: relative;}
.pop-share-serie-item { position: relative; width: 100%; height: 349px; overflow: hidden; pointer-events: none;}
.pop-share-serie-item img { display: block; width: 100%; height: auto;}
.pop-share-serie-item.inv { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0.3;}
.pop-share-serie-layer1 { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
.pop-share-serie-layer1 img { display: block; width: auto; height: 103%; margin-left: -14px;}
.pop-share-serie-layer2 { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; display: none;}
.pop-share-serie-layer2 img { display: block; width: auto; height: 100%; margin-left: -3px;}
.pop-share-tr { position: absolute; z-index: 4; left: 150px; top: 19px; line-height: 26px; color: #F0E6D2; font-size: 16px; font-weight: bold; text-align: left;}
.pop-share-tr-line { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/line.png) no-repeat 0 0; background-size: 100% 100%; width: 1px; height: 24px; position: absolute; top: 2px; left: -12px; z-index: 3;}
.pop-share-serie-schedule { position: absolute; z-index: 5; width: 330px; top: 30px; left: 50%; margin-left: -165px;}
.pop-share-serie-s1 { line-height: 28px; font-style: italic; color: #F0E6D2; font-size: 18px;}
.pop-share-serie-s1 span { padding-right: 6px; font-size: 20px; background-image: linear-gradient(#ffe78a, #fccf4e); -webkit-background-clip: text; color: #dfbd5d; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.pop-share-serie-s1 span b { font-size: 32px; font-style: italic;}
.pop-share-serie-s2 { display: none; line-height: 28px; font-style: italic; color: #F0E6D2; font-size: 18px; padding-top: 20px;}
.pop-share-serie-s2 p { letter-spacing: 2px; font-style: italic; font-size: 10px; background-image: linear-gradient(#eddfb6, #dfc65f); -webkit-background-clip: text; color: #dfbd5d; -webkit-text-fill-color: transparent; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.20);}
.pop-share-serie-s2 p span { font-size: 16px;}
.pop-share-cont.all .pop-share-serie-layer2 { display: block;}
.pop-share-cont.all .pop-share-serie-s1 { display: none;}
.pop-share-cont.all .pop-share-serie-s2 { display: block;}
.pop-share-serie-list { position: absolute; width: 100%; left: 0; z-index: 6;}
.pop-share-serie-list ul { font-size: 0; text-align: center;}
.pop-share-serie-list1,.pop-share-serie-list2,.pop-share-serie-list3 { top: 106px;}
.pop-share-serie-list4,.pop-share-serie-list5 { top: 140px;}
.pop-share-serie-list6,.pop-share-serie-list7,.pop-share-serie-list8,.pop-share-serie-list9,.pop-share-serie-list10,.pop-share-serie-list11,.pop-share-serie-list12,.pop-share-serie-list13,.pop-share-serie-list14 { top: 85px;}
.pop-share-serie-list li { width: 160px; height: 266px; position: relative; margin: 0 8px; display: inline-block; vertical-align: top;}
.pop-share-serie-list4 li,.pop-share-serie-list5 li { transform: scale(.82); margin: 0 -7px; transform-origin: center top;}
.pop-share-serie-list6 li,.pop-share-serie-list7 li,.pop-share-serie-list8 li,.pop-share-serie-list9 li,.pop-share-serie-list10 li,.pop-share-serie-list11 li,.pop-share-serie-list12 li,.pop-share-serie-list13 li,.pop-share-serie-list14 li { transform: scale(.64); margin: 0 -25px -74px -25px; transform-origin: center top; height: 240px;}
.pop-share-serie-list6 li img,.pop-share-serie-list7 li img,.pop-share-serie-list8 li img,.pop-share-serie-list9 li img,.pop-share-serie-list10 li img,.pop-share-serie-list11 li img,.pop-share-serie-list12 li img,.pop-share-serie-list13 li img,.pop-share-serie-list14 li img { width: 100%; height: auto; margin: 0;}
.pop-share-serie-list6 .comm-tag,.pop-share-serie-list7 .comm-tag,.pop-share-serie-list8 .comm-tag,.pop-share-serie-list9 .comm-tag,.pop-share-serie-list10 .comm-tag,.pop-share-serie-list11 .comm-tag,.pop-share-serie-list12 .comm-tag,.pop-share-serie-list13 .comm-tag,.pop-share-serie-list14 .comm-tag { top: 153px !important;}
.pop-share-serie-list6 .pop-serie-skin-name,.pop-share-serie-list7 .pop-serie-skin-name,.pop-share-serie-list8 .pop-serie-skin-name,.pop-share-serie-list9 .pop-serie-skin-name,.pop-share-serie-list10 .pop-serie-skin-name,.pop-share-serie-list11 .pop-serie-skin-name,.pop-share-serie-list12 .pop-serie-skin-name,.pop-share-serie-list13 .pop-serie-skin-name,.pop-share-serie-list14 .pop-serie-skin-name { top: 206px !important;}
.pop-share-serie-list6 ul { padding: 0 200px;}
.pop-share-serie-list6 li .pop-serie-skin-item.inv { display: none;}
.pop-share-serie-list6 li:nth-child(n+4) .pop-serie-skin-item.inv { display: block;}
.pop-share-serie-list7 ul { padding: 0 140px;}
.pop-share-serie-list7 li .pop-serie-skin-item.inv { display: none;}
.pop-share-serie-list7 li:nth-child(n+5) .pop-serie-skin-item.inv { display: block;}
.pop-share-serie-list8 ul { padding: 0 140px;}
.pop-share-serie-list8 li .pop-serie-skin-item.inv { display: none;}
.pop-share-serie-list8 li:nth-child(n+5) .pop-serie-skin-item.inv { display: block;}
.pop-share-serie-list9 ul { padding: 0 100px;}
.pop-share-serie-list9 li .pop-serie-skin-item.inv { display: none;}
.pop-share-serie-list9 li:nth-child(n+6) .pop-serie-skin-item.inv { display: block;}
.pop-share-serie-list10 ul { padding: 0 100px;}
.pop-share-serie-list10 li .pop-serie-skin-item.inv { display: none;}
.pop-share-serie-list10 li:nth-child(n+6) .pop-serie-skin-item.inv { display: block;}
.pop-share-serie-list11 ul { padding: 0 40px;}
.pop-share-serie-list11 li .pop-serie-skin-item.inv { display: none;}
.pop-share-serie-list11 li:nth-child(n+7) .pop-serie-skin-item.inv { display: block;}
.pop-share-serie-list12 ul { padding: 0 40px;}
.pop-share-serie-list12 li .pop-serie-skin-item.inv { display: none;}
.pop-share-serie-list12 li:nth-child(n+7) .pop-serie-skin-item.inv { display: block;}
.pop-share-serie-list13 ul { padding: 0;}
.pop-share-serie-list13 li .pop-serie-skin-item.inv { display: none;}
.pop-share-serie-list13 li:nth-child(n+8) .pop-serie-skin-item.inv { display: block;}
.pop-share-serie-list14 ul { padding: 0;}
.pop-share-serie-list14 li .pop-serie-skin-item.inv { display: none;}
.pop-share-serie-list14 li:nth-child(n+8) .pop-serie-skin-item.inv { display: block;}
.pop-serie-skin-item { width: 100%; height: 100%; position: relative;}
.pop-serie-skin-item.inv { transform: rotateX(180deg); opacity: .5;}
.pop-serie-skin-item.inv:before { content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); position: absolute; left: 0; top: 0; z-index: 11;}
.pop-serie-skin-box { width: 100%; height: 100%; overflow: hidden;}
.pop-serie-skin-box img { display: block; width: auto; height: 100%; margin-left: -9px;}
.pop-serie-skin-name { position: relative; z-index: 7; position: absolute; top: 230px; width: 90%; left: 5%; text-align: center;}
.pop-serie-skin-name p { color: #F0E6D2; font-size: 10px; line-height: 14px;}
.pop-share-serie-list .comm-tag { height: 52px; position: absolute; z-index: 5; left: 0; top: 177px;}
.pop-share-serie-list .comm-tag img { display: block; margin: 0 auto; width: auto; height: 100%; border-radius: 0;}
.pop-share-serie-layer3 { background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/pop-share-serie-layer3.png) no-repeat 0 0; background-size: 100% 100%; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9;}
.pop-share-serie-list li.lock .colorful-rare-unlock { position: absolute; left: 50%; margin-left: -18px; display: block; bottom: -19px; z-index: 10;}
.pop-share-serie-list li.lock .pop-serie-skin-item:after { content: ""; position: absolute; z-index: 6; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); left: 0; top: 0;}
.pop-tips-cont { width: 100%; height: auto; padding-top: 24px; padding-bottom: 50px; text-align: center;}
.pop-tips-cont p.pop-tips-p1 { line-height: 26px; color: #F0E6D2; font-size: 14px;}
.pop-tips-cont p.pop-tips-p2 { padding-top: 2px; line-height: 24px; color: #CDBE91; font-size: 12px;}
.pop-tips-cont p.pop-tips-p3 { width: 90%; margin: 0 auto; padding-top: 10px; line-height: 24px; font-size: 0;}
.pop-tips-p3 em { cursor: pointer; display: inline-block; vertical-align: top; margin: 2px 5px 0 0;}
.pop-tips-p3 span { color: #A09B8C; font-size: 12px; line-height: 14px;}
.pop-tips-p3 a { color: #A09B8C; text-decoration: underline;}
.pop-tips .dialog-frame-button { bottom: -2px;}
.pop-tips .dialog-frame { width: 452px;}

/*0517*/
.colorful-search { margin: 0 auto 10px; width: 152px; height: 30px; line-height: 30px;}
.colorful-search h5 { margin-left: 10px; width: 18px;}
.colorful-search input { width: 96px; margin-left: 0;}
.colorful-search input::-webkit-input-placeholder { color: #a09b8c;}
.ranking-left-tips { width: auto; height: 20px; z-index: 6;}
.ranking-left-tips p { font-size: 0; text-align: right; line-height: 20px; cursor: pointer;}
.ranking-left-tips span,.ranking-left-tips em { display: inline-block; vertical-align: middle; font-size: 12px;}
.ranking-left-tips em { margin-left: 4px; background: url(//game.gtimg.cn/images/lol/act/a20230715chromahub/ranking-tips-icon.png) no-repeat 0 0; background-size: 100% 100%; width: 18px; height: 18px;}
.ranking-left-tips-hov { display: none; width: 140px; text-align: center; padding: 6px 4px; font-size: 12px; line-height: 18px; background-color: #1e2328; border: 1px solid #5a5956; position: absolute; left: 50%; margin-left: -70px; top: 24px;}
.ranking-left-tips-hov:before { content: ""; width: 6px; height: 6px; background-color: #1e2328; border-left: 1px solid #5a5956; border-top: 1px solid #5a5956; position: absolute; top: -4.2px; left: 50%; margin-left: -3px; transform: rotate(45deg);}
.ranking-left-tips:hover .ranking-left-tips-hov { display: block;}