.letter-list{
    position: relative;
    padding: 20px 0;
}


.letter-list .letter-show-all{
    z-index: 99;
    position: relative;
    float: right;
    padding: 3px 20px;
    margin: 4px 0 0 0;
}

.letter-list::after{
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    height: 1px;
    background: #CCCCCC;
    z-index: 95;
}

.letter-list .letter-wrapper{
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 50px;
    height: 34px;
    cursor: pointer
}
.letter-list .letter{
    display: block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    color: #FFF;
    z-index: 99;
    font-family: Arial, "Trebuchet MS", 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
}


.letter-list .letter-wrapper:nth-child(1){
    margin: 0 0 0 -7px;
} 


/*     background: -webkit-linear-gradient(left,#875CA3,#D88946,#6DAB24);
    background: -o-linear-gradient(right,#875CA3,#D88946,#6DAB24);
    background: -moz-linear-gradient(right,#875CA3,#D88946,#6DAB24);
    background: linear-gradient(to right,#875CA3,#D88946,#6DAB24); */

.letter-list .letter.letter-Z{
    background: #875CA3;
}

.letter-list .letter.letter-Y{
    background: #875CA3;
}
.letter-list .letter.letter-X{
    background: #8A5E9F;
    background: -webkit-linear-gradient(left,#8A5E9F,#8D5F9C);
    background: -o-linear-gradient(right,#8A5E9F,#8D5F9C);
    background: -moz-linear-gradient(right,#8A5E9F,#8D5F9C);
    background: linear-gradient(to right,#8A5E9F,#8D5F9C);

}
.letter-list .letter.letter-W{
    background: #916197;
    background: -webkit-linear-gradient(left,#916197,#946294);
    background: -o-linear-gradient(right,#916197,#946294);
    background: -moz-linear-gradient(right,#916197,#946294);
    background: linear-gradient(to right,#916197,#946294);

}
.letter-list .letter.letter-V{
    background: #99658F;
    background: -webkit-linear-gradient(left,#99658F,#9B668C);
    background: -o-linear-gradient(right,#99658F,#9B668C);
    background: -moz-linear-gradient(right,#99658F,#9B668C);
    background: linear-gradient(to right,#99658F,#9B668C);
}
.letter-list .letter.letter-U{
    background: #9F6888;
    background: -webkit-linear-gradient(left,#9F6888,#A26A84);
    background: -o-linear-gradient(right,#9F6888,#A26A84);
    background: -moz-linear-gradient(right,#9F6888,#A26A84);
    background: linear-gradient(to right,#9F6888,#A26A84);

}
.letter-list .letter.letter-T{
    background: #A76C7F;
    background: -webkit-linear-gradient(left,#A76C7F,#AA6E7C);
    background: -o-linear-gradient(right,#A76C7F,#AA6E7C);
    background: -moz-linear-gradient(right,#A76C7F,#AA6E7C);
    background: linear-gradient(to right,#A76C7F,#AA6E7C);

}
.letter-list .letter.letter-S{
    background: #AE7077;
    background: -webkit-linear-gradient(left,#AE7077,#B17274);
    background: -o-linear-gradient(right,#AE7077,#B17274);
    background: -moz-linear-gradient(right,#AE7077,#B17274);
    background: linear-gradient(to right,#AE7077,#B17274);
}
.letter-list .letter.letter-R{
    background: #AE7077;
    background: -webkit-linear-gradient(left,#AE7077,#B17274);
    background: -o-linear-gradient(right,#AE7077,#B17274);
    background: -moz-linear-gradient(right,#AE7077,#B17274);
    background: linear-gradient(to right,#AE7077,#B17274);
}
.letter-list .letter.letter-Q{
    background: #BC7868;
    background: -webkit-linear-gradient(left,#BC7868,#BF7964);
    background: -o-linear-gradient(right,#BC7868,#BF7964);
    background: -moz-linear-gradient(right,#BC7868,#BF7964);
    background: linear-gradient(to right,#BC7868,#BF7964);
}
.letter-list .letter.letter-P{
    background: #C37C61;
    background: -webkit-linear-gradient(left,#C37C61,#C67D5D);
    background: -o-linear-gradient(right,#C37C61,#C67D5D);
    background: -moz-linear-gradient(right,#C37C61,#C67D5D);
    background: linear-gradient(to right,#C37C61,#C67D5D);
}
.letter-list .letter.letter-O{
    background: #CA8059;
    background: -webkit-linear-gradient(left,#CA8059,#CD8155);
    background: -o-linear-gradient(right,#CA8059,#CD8155);
    background: -moz-linear-gradient(right,#CA8059,#CD8155);
    background: linear-gradient(to right,#CA8059,#CD8155);
}
.letter-list .letter.letter-N{
    background: #D28350;
    background: -webkit-linear-gradient(left,#D28350,#D4854E);
    background: -o-linear-gradient(right,#D28350,#D4854E);
    background: -moz-linear-gradient(right,#D28350,#D4854E);
    background: linear-gradient(to right,#D28350,#D4854E);
}
.letter-list .letter.letter-M{
    background: #D98748;
    background: -webkit-linear-gradient(left,#D98748,#D88946);
    background: -o-linear-gradient(right,#D98748,#D88946);
    background: -moz-linear-gradient(right,#D98748,#D88946);
    background: linear-gradient(to right,#D98748,#D88946);
}
.letter-list .letter.letter-L{
    background: #D28A45;
    background: -webkit-linear-gradient(left,#D28A45,#CE8C43);
    background: -o-linear-gradient(right,#D28A45,#CE8C43);
    background: -moz-linear-gradient(right,#D28A45,#CE8C43);
    background: linear-gradient(to right,#D28A45,#CE8C43);
}
.letter-list .letter.letter-K{
    background: #C98D42;
    background: -webkit-linear-gradient(left,#C98D42,#C58F40);
    background: -o-linear-gradient(right,#C98D42,#C58F40);
    background: -moz-linear-gradient(right,#C98D42,#C58F40);
    background: linear-gradient(to right,#C98D42,#C58F40);
}
.letter-list .letter.letter-J{
    background: #BF913E;
    background: -webkit-linear-gradient(left,#BF913E,#BB923D);
    background: -o-linear-gradient(right,#BF913E,#BB923D);
    background: -moz-linear-gradient(right,#BF913E,#BB923D);
    background: linear-gradient(to right,#BF913E,#BB923D);
}
.letter-list .letter.letter-I{
    background: #B5943B;
    background: -webkit-linear-gradient(left,#B5943B,#B1953A);
    background: -o-linear-gradient(right,#B5943B,#B1953A);
    background: -moz-linear-gradient(right,#B5943B,#B1953A);
    background: linear-gradient(to right,#B5943B,#B1953A);
}
.letter-list .letter.letter-H{
    background: #B5943B;
    background: -webkit-linear-gradient(left,#B5943B,#B1953A);
    background: -o-linear-gradient(right,#B5943B,#B1953A);
    background: -moz-linear-gradient(right,#B5943B,#B1953A);
    background: linear-gradient(to right,#B5943B,#B1953A);
}
.letter-list .letter.letter-G{
    background: #BB923D;
    background: -webkit-linear-gradient(left,#BB923D,#A89837);
    background: -o-linear-gradient(right,#BB923D,#A89837);
    background: -moz-linear-gradient(right,#BB923D,#A89837);
    background: linear-gradient(to right,#BB923D,#A89837);
}
.letter-list .letter.letter-F{
    background: #A29A35;
    background: -webkit-linear-gradient(left,#A29A35,#9E9B34);
    background: -o-linear-gradient(right,#A29A35,#9E9B34);
    background: -moz-linear-gradient(right,#A29A35,#9E9B34);
    background: linear-gradient(to right,#A29A35,#9E9B34);
}
.letter-list .letter.letter-E{
    background: #989D32;
    background: -webkit-linear-gradient(left,#989D32,#989D32);
    background: -o-linear-gradient(right,#989D32,#989D32);
    background: -moz-linear-gradient(right,#989D32,#989D32);
    background: linear-gradient(to right,#989D32,#989D32);
}
.letter-list .letter.letter-D{
    background: #8EA02F;
    background: -webkit-linear-gradient(left,#8EA02F,#8AA22D);
    background: -o-linear-gradient(right,#8EA02F,#8AA22D);
    background: -moz-linear-gradient(right,#8EA02F,#8AA22D);
    background: linear-gradient(to right,#8EA02F,#8AA22D);
}
.letter-list .letter.letter-C{
    background: #84A42B;
    background: -webkit-linear-gradient(left,#84A42B,#81A52A);
    background: -o-linear-gradient(right,#84A42B,#81A52A);
    background: -moz-linear-gradient(right,#84A42B,#81A52A);
    background: linear-gradient(to right,#84A42B,#81A52A);
}
.letter-list .letter.letter-B{
    background: #7BA728;
    background: -webkit-linear-gradient(left,#7BA728,#77A827);
    background: -o-linear-gradient(right,#7BA728,#77A827);
    background: -moz-linear-gradient(right,#7BA728,#77A827);
    background: linear-gradient(to right,#7BA728,#77A827);
}
.letter-list .letter.letter-A{
    background: #71AA25;
    background: -webkit-linear-gradient(left,#71AA25,#6DAB24);
    background: -o-linear-gradient(right,#71AA25,#6DAB24);
    background: -moz-linear-gradient(right,#71AA25,#6DAB24);
    background: linear-gradient(to right,#71AA25,#6DAB24);
}

.letter-list .letter-wrapper.selected  .letter,
.letter-list .letter-wrapper:hover .letter{
    display: none;
}

.letter-list .letter-wrapper:hover{
    font-size: 30px;
    border: 0;
    top: 0;
    left: 0;
	margin-right: 15px;
    width: 35px;
    height: 34px;
    line-height: 25px;
    background: #E7E7E7;
    position: relative;
    background-size: 34px 34px;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 99;
}

.letter-list .letter-wrapper.selected{
    font-size: 30px;
    border: 0;
    top: 0;
    left: 0;
	margin-right: 15px;
    width: 34px;
    height: 34px;
    line-height: 25px;
    background: #E7E7E7;
    position: relative;
    background-size: 34px 34px;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 99;
    border-radius: 50%;

}


.letter-list .letter-wrapper.letter-wrapper-A:hover{background-image: url('/images/letter/A.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-B:hover{background-image: url('/images/letter/B.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-C:hover{background-image: url('/images/letter/C.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-D:hover{background-image: url('/images/letter/D.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-E:hover{background-image: url('/images/letter/E.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-F:hover{background-image: url('/images/letter/F.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-G:hover{background-image: url('/images/letter/G.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-H:hover{background-image: url('/images/letter/H.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-I:hover{background-image: url('/images/letter/I.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-J:hover{background-image: url('/images/letter/J.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-K:hover{background-image: url('/images/letter/K.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-L:hover{background-image: url('/images/letter/L.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-M:hover{background-image: url('/images/letter/M.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-N:hover{background-image: url('/images/letter/N.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-O:hover{background-image: url('/images/letter/O.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-P:hover{background-image: url('/images/letter/P.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-Q:hover{background-image: url('/images/letter/Q.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-R:hover{background-image: url('/images/letter/R.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-S:hover{background-image: url('/images/letter/S.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-T:hover{background-image: url('/images/letter/T.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-U:hover{background-image: url('/images/letter/U.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-V:hover{background-image: url('/images/letter/V.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-W:hover{background-image: url('/images/letter/W.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-X:hover{background-image: url('/images/letter/X.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-Y:hover{background-image: url('/images/letter/Y.png');  z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-Z:hover{background-image: url('/images/letter/Z.png');  z-index: 999;}

.letter-list .letter-wrapper.letter-wrapper-A.selected,.letter-list .letter-wrapper.letter-wrapper-A.selected:hover{background-image: url('/images/letter/AA.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-B.selected,.letter-list .letter-wrapper.letter-wrapper-B.selected:hover{background-image: url('/images/letter/BB.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-C.selected,.letter-list .letter-wrapper.letter-wrapper-C.selected:hover{background-image: url('/images/letter/CC.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-D.selected,.letter-list .letter-wrapper.letter-wrapper-D.selected:hover{background-image: url('/images/letter/DD.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-E.selected,.letter-list .letter-wrapper.letter-wrapper-E.selected:hover{background-image: url('/images/letter/EE.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-F.selected,.letter-list .letter-wrapper.letter-wrapper-F.selected:hover{background-image: url('/images/letter/FF.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-G.selected,.letter-list .letter-wrapper.letter-wrapper-G.selected:hover{background-image: url('/images/letter/GG.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-H.selected,.letter-list .letter-wrapper.letter-wrapper-H.selected:hover{background-image: url('/images/letter/HH.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-I.selected,.letter-list .letter-wrapper.letter-wrapper-I.selected:hover{background-image: url('/images/letter/II.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-J.selected,.letter-list .letter-wrapper.letter-wrapper-J.selected:hover{background-image: url('/images/letter/JJ.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-K.selected,.letter-list .letter-wrapper.letter-wrapper-K.selected:hover{background-image: url('/images/letter/KK.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-L.selected,.letter-list .letter-wrapper.letter-wrapper-L.selected:hover{background-image: url('/images/letter/LL.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-M.selected,.letter-list .letter-wrapper.letter-wrapper-M.selected:hover{background-image: url('/images/letter/MM.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-N.selected,.letter-list .letter-wrapper.letter-wrapper-N.selected:hover{background-image: url('/images/letter/NN.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-O.selected,.letter-list .letter-wrapper.letter-wrapper-O.selected:hover{background-image: url('/images/letter/OO.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-P.selected,.letter-list .letter-wrapper.letter-wrapper-P.selected:hover{background-image: url('/images/letter/PP.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-Q.selected,.letter-list .letter-wrapper.letter-wrapper-Q.selected:hover{background-image: url('/images/letter/QQ.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-R.selected,.letter-list .letter-wrapper.letter-wrapper-R.selected:hover{background-image: url('/images/letter/RR.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-S.selected,.letter-list .letter-wrapper.letter-wrapper-S.selected:hover{background-image: url('/images/letter/SS.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-T.selected,.letter-list .letter-wrapper.letter-wrapper-T.selected:hover{background-image: url('/images/letter/TT.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-U.selected,.letter-list .letter-wrapper.letter-wrapper-U.selected:hover{background-image: url('/images/letter/UU.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-V.selected,.letter-list .letter-wrapper.letter-wrapper-V.selected:hover{background-image: url('/images/letter/VV.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-W.selected,.letter-list .letter-wrapper.letter-wrapper-W.selected:hover{background-image: url('/images/letter/WW.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-X.selected,.letter-list .letter-wrapper.letter-wrapper-X.selected:hover{background-image: url('/images/letter/XX.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-Y.selected,.letter-list .letter-wrapper.letter-wrapper-Y.selected:hover{background-image: url('/images/letter/YY.png'); z-index: 999;}
.letter-list .letter-wrapper.letter-wrapper-Z.selected,.letter-list .letter-wrapper.letter-wrapper-Z.selected:hover{background-image: url('/images/letter/ZZ.png'); z-index: 999;}





/* .letter-list .letter::after{
    content:'';
    position:absolute;
    left: 6px;
    top: 6px;
    border-radius:100%;
    width:20px; 
    height:20px;
    box-shadow: 0px 0px 0px 2000px rgba(231, 231, 231,1);
} */


@media screen and (max-width: 1024px) {
    .letter-list .letter-show-all{
        padding: 3px 15px;
    }
}


@media screen and (max-width: 1023px) {

    .letter-list .letter-show-all{
        position: absolute;
        top: 38px;
        width: 110px;
        left: -30px;
        padding: 3px 8px;
        border-radius: 15px;
        font-size: 20px;
        margin: 2px 0 0 0;
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }

    .letter-list{
        position: absolute;
        width: 50px;
        right: 0;
        top: 50px;
        /* position: fixed; */
        /* height: 100%; */
        /* overflow: hidden; */
        /* overflow-y: scroll; */
        padding: 120px 0 0 0;
        text-align: center;
    }

    .letter-list .letter-wrapper,
    .letter-list .letter-wrapper.selected,
    .letter-list .letter-wrapper.selected:hover,
    .letter-list .letter-wrapper:hover,
    .letter-list .letter-wrapper:nth-child(1)
    {
        display: block;
        position: relative;
        vertical-align: middle;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        /* border: 1px solid #000; */
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 99;
        border-radius: 50%;
    }

    .letter-list .letter-wrapper:hover{
        background-size: 52px 52px;
        border-radius: 50%;
    }
    .letter-list .letter{
        top: 7px;
        left: 7px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        /* line-height: 34px; */
    }

    .letter-list .letter-wrapper:hover .letter{
        display: none;
    }

    .letter-list::after {
        width: 1px;
        left: 24px;
        top: 0;
        height: calc(100% - 19px);
    }

}