.zhuye{
    position:relative;
}
body{
    overflow:visible;
    background-color: black;
}
#zjm{
    position: relative;
    background-image: url(./img/championsBackground.jpg);
    background-repeat: no-repeat;
    background-size: 1550px;
}
.dibu{
    position: relative;
    width: 100%;
    height: 1000px;
    background-color: black;
    opacity:0.9;
}
.tupian{
    position: relative;
    left: 20px;
    width: 1400px;
    height: 1000px;
}
#to{
    text-align: center;
}
#to img{
    position: absolute;
    top: 250px;
    width: 20px;
}
#to h1{
    margin-top: 230px;
    margin-left: 20px;
    color: rgb(233, 168, 48);
    position: relative;
    bottom: 900px;
}
#wdf{
    overflow: hidden;
    position: relative;
    height: 1800px;
    bottom: 900px;
}
#wdf li div{
    overflow: hidden;
    font-weight: 1;
    font-size: 20px;
    transition: all 0.5s;
    text-align: center;
    border-top:1px solid rgb(233, 168, 48);
    color: rgb(233, 168, 48);
    position: absolute;
    bottom: 0px;
    width: 250px;
    height: 80px;
    line-height: 60px;
    background-color: black;
    opacity: 0.9;
}
#wdf li div:hover{
    height: 120px;
}
#wdf li p{
    position: relative;
    top: 10px;
    height: 50px;
    line-height: 50px;
}
#wdf li p:hover{
    border: 1px solid rgb(233, 168, 48);
}
li div:hover{
    border: 1px solid rgb(233, 168, 48);
}
.tupian li span{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 95px;
    font-size: 15px;
}
#b{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#c{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 103px;
    font-size: 15px;
}
#d{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#e{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 105px;
    font-size: 15px;
}
#f{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#g{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#h{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 103px;
    font-size: 15px;
}
#i{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#j{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 103px;
    font-size: 15px;
}
#k{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#l{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#m{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 102px;
    font-size: 15px;
}
#n{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#o{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#p{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#q{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#r{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#s{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 110px;
    font-size: 15px;
}
#t{
    color: bisque;
    position: absolute;
    top: 25px;
    left: 95px;
    font-size: 15px;
}
.tupian li:nth-of-type(20){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt4c3e514b7691fbf8-Rengar_0.jpg);
    background-size: 678px 454px;
    background-position: -300px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(5){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/bltd8de2cd9f955bffc-kaisa-splash.jpg);
    background-size: 678px 454px;
    background-position: -170px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(6){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt107f004fd12ef551-Jinx_0.jpg);
    background-size: 678px 454px;
    background-position: -330px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(7){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt359f81b2f47d8434-champion-pyke-splash.jpg);
    background-size: 678px 454px;
    background-position: -200px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(8){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt36ae14be635e9bdc-Draven_0.jpg);
    background-size: 678px 454px;
    background-position: -380px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(1){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt3cefcd6544df9e5d-yone-splash.jpg);
    background-size: 678px 454px;
    background-position: -250px 0px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(2){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt41c476486b063ef8-Yasuo_0.jpg);
    background-size: 678px 454px;
    background-position: -340px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(3){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt4a1eca6952a9cb94-viego-splash.jpg);
    background-size: 678px 454px;
    background-position: -330px 0px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(9){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt4bc5fffe8811bf6a-Braum_0.jpg);
    background-size: 678px 454px;
    background-position: -370px 0px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(10){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt4d91710a07d51938-Leblanc_0.jpg);
    background-size: 678px 454px;
    background-position: -330px 0px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(11){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt6d95f66073acbe03-Twitch_0.jpg);
    background-size: 678px 454px;
    background-position: -270px 0px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(12){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt6f5beb33c10f0fc9-Shaco_0.jpg);
    background-size: 678px 454px;
    background-position: -340px 0px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(13){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt7a9366b61b34f8a7-swain-splash.jpg);
    background-size: 678px 454px;
    background-position: -320px 0px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(14){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt7df9d71e87d2ab9a-Talon_0.jpg);
    background-size: 678px 454px;
    background-position: -300px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(15){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt8c02ab1e736da4a3-pantheon_splash.jpg);
    background-size: 678px 454px;
    background-position: -200px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(16){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt8c19d1dbd195fa20-kayn-splash-resized.jpg);
    background-size: 678px 454px;
    background-position: -200px 0px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(17){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt8ed0ddc56697f275-Teemo_0.jpg);
    background-size: 678px 454px;
    background-position: -340px 0px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(18){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt95cdb2d55e0d22f4-Yuumi_0.jpg);
    background-size: 678px 454px;
    background-position: -170px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(19){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blt9fd7de40b070c6d4-Thresh_0.jpg);
    background-size: 678px 454px;
    background-position: -300px -10px;
    transition: all 0.7s;
}
.tupian li:nth-of-type(4){
    opacity: 1;
    width: 250px;
    height: 400px;
    margin-left: 15px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-image: url(./img/blta877c35110144de9-aatrox-splash.jpg);
    background-size: 678px 454px;
    background-position: -310px -10px;
    transition: all 0.7s;
}
.tupian div{
    cursor: pointer;
}
.tupian li:hover{
    transform: scale(1.1);
}
.tupian{
    float: left;
    margin-left: 70px;
    
}
.title{
    position: absolute;
    width: 100%;
    height: 100px;
    z-index: 500;
    background-color:#101012;
    top:63px;
}
.title #sou{
    position: absolute;
    left: 150px;
    margin-top: 30px;
    width: 20px;
}
.title input{
    position: absolute;
    left: 200px;
    margin-top: 40px;
    background-color: #101012;
    border: 0px #101012;
    color: bisque;
}
.dhz{
    width: 100%;
    height: 2500px;
}