@charset "UTF-8";

/* content */
.wrapper{height: 21.64rem;background-image: url(../ossweb-img/information/bg1.jpg),url(../ossweb-img/information/bg2.jpg);background-size: 100% 10rem,100% 11.64rem;background-repeat: no-repeat,no-repeat;background-position: 0 0.7rem,0 10.7rem}

/* content */
.content{width: 15rem;margin: 0 auto;}

.position{font-size: .22rem;color: #463d3a;line-height: .22rem;padding: .6rem 0;}

.position a{color: #463d3a;}

.inforTab{margin-bottom: .74rem;display: flex;}

.inforTab a{font-size: .28rem;color: #716b5e;width: 1.72rem;height: .58rem;line-height: .58rem;text-align: center;margin-right: .5rem;}

.inforTab a.on,.inforTab a:hover{background-color: #463d3a;color: #ece1d2;}


/* ------------ */
.details{display: none;}

/* card-library */

.card-library{width: 15rem;}

.card-tab{width: 3rem;float: left;}

.card-detail{width: 11.86rem;float: right;display: flex;justify-content: space-between;}

.card-tab-type{width: 100%;height: .56rem;border-bottom: .01rem solid #463d3a;display: flex;justify-content: space-between;}

.tit1{font-size: .22rem;color: #463d3a;line-height: .32rem;font-weight: bold;}

.all{width: .7rem;line-height: .32rem;color: #463d3a;text-align: center;font-weight: bold;height: .32rem;display: block;}

.all.on,.all:hover{color: #efe1d9;background: #463d3a;}

.card-tab-list{width: 100%;display: flex;flex-wrap: wrap;flex-shrink: 0;flex-grow: 0;padding-top: .34rem;}

.card-tab-list li{width: 1.4rem;font-size: .22rem;color: #463d3a;line-height: .34rem;text-align: center;margin-bottom: .82rem;cursor: pointer;position: relative;}

.card-tab-list li:hover,.card-tab-list li.on{background: url(../ossweb-img/cardworld/btn-hover.png) no-repeat;background-size: 100% 100%;}

.card-tab-list li.on::after,.card-tab-list li:hover::after{display: block;}

.allcard-box{width: 2.14rem;height: 7.49rem;background: url(../ossweb-img/cardworld/type-bg.jpg) no-repeat;background-size: 100%;padding-top: .12rem;box-sizing: border-box;}

.allcard-list{height: 7.2rem;overflow-y: auto;width: 1.94rem;margin-left: .18rem;}

/*预组卡牌*/

.card-group{width: 15rem;justify-content: space-between;}

.card-group .card-tab{width: 1.6rem;}

.card-group-details{width: 13.4rem;display: flex;justify-content: space-between;}

.group-box{width: 14rem;}

.group-box .title{text-align: center;font-size: 30px;background: -webkit-linear-gradient(#866812, #463e2e);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin: 0 auto;font-weight: bold;padding-bottom: .4rem;}

.group-intr{font-size: .24rem;color: #4a403e;line-height: .3rem;padding-bottom: .5rem;white-space: pre-wrap;text-align: justify;
overflow-wrap: break-word;padding-left: 1.24rem;text-indent: -1.22rem;}

.card-group-details .allcard-box{margin-top: .3rem;}

.type-name{font-size: .22rem;font-weight: bold;line-height: .4rem;padding-bottom: .2rem;color: #ffe4a5;}

.group-details{height: 12rem;width: 13.4rem;    background: url(../ossweb-img/cardworld/intr-bg.png) no-repeat;background-size: 100% 100%;padding: .5rem;box-sizing: border-box;}

.group-details .scroll{width: 100%;height: 100%;overflow-y: auto;}

.group-details ul{display: flex;flex-wrap: wrap;}

.group-details li{width: 1.8rem;flex-shrink: 0;margin-right: .28rem;margin-bottom: .3rem;position: relative;cursor: pointer;}

.group-details li:hover{filter: brightness(1.2);}

.group-details ul li:nth-child(6n){margin-right: 0;}

.group-details li img{width: 100%;}

.group-details li .name{position: absolute;bottom: 0.06rem;left: 0;width: 100%;line-height: 0.4rem;font-size: .2rem;color: #fff;background: rgba(0,0,0,0.4);text-align: center;}

/*弹窗样式*/
.dialog{/*display: none;*/box-sizing: border-box;position: fixed;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);z-index: 99;}
.dia-con {width: 7.44rem;height: 5.2rem;background: url(//game.gtimg.cn/images/lol/act/a20241114allstar/pop6.png) no-repeat;background-size: 100% 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

.dialog .dia-close {position: absolute;top: 15px;right: 18px;width: 37px;height: 37px;background: url(//game.gtimg.cn/images/lol/act/a20241114allstarvote/pc/close.png) no-repeat;background-size: 100% 100%;}

/* 设置滚动条的宽度 */
.group-details .scroll::-webkit-scrollbar {
  width: .1rem;
  background-color: transparent;
}

/* 设置轨道的背景色 */
.group-details .scroll::-webkit-scrollbar-track {
  background: transparent; 
}

/* 设置滑块的颜色 */
.group-details .scroll::-webkit-scrollbar-thumb {
  background: #b38143; 
}

/* 设置滚动条的宽度 */
.allcard-list::-webkit-scrollbar {
  width: .05rem;
  background-color: transparent;
}

/* 设置轨道的背景色 */
.allcard-list::-webkit-scrollbar-track {
  background: transparent; 
}

/* 设置滑块的颜色 */
.allcard-list::-webkit-scrollbar-thumb {
  background: #cec7b7; 
}

.allcard-list li{width: 1.26rem;line-height: .32rem;color: #8f8580;border-bottom: .01rem solid #8f8580;text-align: center;cursor: pointer;position: relative;margin-left: .28rem;padding: .23rem 0;}

.allcard-list li.on,.allcard-list li:hover{color: #ece1d2;/*border-bottom: .01rem solid #ece1d2;*/}

.allcard-list li.on:after,.allcard-list li:hover::after{content: '';width: .28rem;height: .15rem;background: url(../ossweb-img/cardworld/hover-icon2.png) no-repeat;background-size: 100%;display: block;position: absolute;top: 50%;left: -.3rem;transform: translateY(-.08rem);}

.cards-wrap{width: 9.61rem;min-height: 13rem;height: auto;background: url(../ossweb-img/cardworld/intr-bg2.png) no-repeat #5f5754;background-size: 100% 100%;position: relative;padding: .73rem 0 0 4.76rem;box-sizing: border-box;}

.cards-img{width: 3.73rem;height: 5.21rem;position: absolute;top: .73rem;left: .7rem;}

.cards-wrap .name{font-size: .26rem;color: #eac188;font-weight: bold;line-height: .28rem;padding-bottom: .1rem;}

.cards-wrap .intr{font-size: .18rem;color: #ece1d2;line-height: .32rem;padding-bottom: .5rem;width: 4.16rem;text-align: justify;}

.supplement{padding-bottom: .3rem;}

#main{width: 3.86rem;height: 3.86rem;position: absolute;top: 6.73rem;left: .7rem;}

#main>div{width: 100%!important;height: 100%!important;}

#main canvas{width: 100%!important;height: 100%!important;}

.rarity{width: 4.19rem;height: .87rem;background: url(../ossweb-img/cardworld/xy.png) no-repeat;background-size: 100%;font-size: .18rem;color: #ece1d2;line-height: .87rem;text-indent: .24rem;}

.rarity span{padding-left: .8rem;}

.skill-intr{width: 4.19rem;height: auto;background: url(../ossweb-img/cardworld/skill-bg.png) no-repeat;background-size: 100%;padding: .25rem 0.23rem 0;box-sizing: border-box;}

.skill-intr>p{font-size: .18rem;color: #eac188;padding-bottom: .18rem;line-height: .3rem;}

.skills p{font-size: .16rem;color: #ece1d2;line-height: .22rem;padding-bottom: .1rem;text-align: justify;text-shadow: 1px 0 0 #ae7070}

.skill-intr .pd30{padding-top: .3rem;}

.skills .skillName{color: #ffe4a5;position: relative;font-size: .18rem}

.skills .skillName::after{content: '';width: .04rem;height: .14rem;background-color: #ffecb0;display: block;position: absolute;top: .04rem;left: -.08rem;}

/* card-evaluation */

.information-wrap{width: 15rem;min-height: 10rem;background: rgba(70,61,58,0.8);background-size: 15rem auto;margin: 0 auto;}

.information-wrap ul{width: 13rem;margin: 0 auto;}

.information-wrap li{width: 100%;height: 1rem;border-bottom: 0.01rem solid #7f796e;color: #cec5b4;line-height: 1rem;font-size: .24rem;display: flex;position: relative;cursor: pointer;}

.information-wrap li a{color: #cec5b4;display: flex;position: relative;width: 100%;height: 100%;}

.information-wrap li:hover{filter:brightness(1.3)}

.information-wrap .inforType{margin-right: .3rem;}

.information-wrap .inforTime{position: absolute;top: 0;right: 0;}


/* card-history */

.title4{width: 2.06rem;height: 1.46rem;background: url(../ossweb-img/cardworld/title4.png) no-repeat;}

.title{background-size: 100%;margin: 0 auto;}

.history-intr{width: 15.52rem;height: 12.53rem;background: url(../ossweb-img/cardworld/intr-bg.png) no-repeat;background-size: 100%;margin: -0.04rem auto 0;padding: 0.7rem;color: #ece1d2;font-size: .22rem;line-height: .5rem;box-sizing: border-box;text-shadow: 1px 0 0 #ae7070;}

.history-intr p{margin-top: .5rem;}