* {
    margin: 0;
    padding: 0;
}
.picker-wraper {
    display: block;
    position: relative;
    height: 210px;
    overflow: hidden;
    width: 100%;
}

.picker-wraper dl.picker-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}
.picker-wraper dl.picker-content dd {
    text-align: center;
    font-size: 20px;
    color: #000;
}

.picker-wraper .picker-mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    z-index: 3;
    transform: translateZ(0px);
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
        linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
    background-position: top, bottom;
    background-size: 100% 43%;
    background-repeat: no-repeat;
}

.picker-wraper .picker-indicator {
    width: 100%;
    height: 36px;
    position: absolute;
    left: 0;
    top: 102px;
    z-index: 3;
}
.picker-wraper .picker-indicator::before{
    content: '';
    border-top:1px solid #8686;
    border-bottom:1px solid #8686;
    position: absolute;
    width: 100%;
    top:0;
    bottom:0;
}

.option-5{
    transform: translate(0px, 0px) rotateX(-90deg)
}
.option-4{
    transform: translate(0px, 45px) rotateX(-70deg)
}
.option-3{
    transform: translate(0px, 25px) rotateX(-60deg)
}
.option-2{
    transform: translate(0px, 10px) rotateX(-40deg);
}
.option-1{
    transform: rotateX(-20deg);
}
.option0{
    transform: scale(1.2);
}

.option5{
    transform: translate(0px, 0px) rotateX(90deg)
}
.option4{
    transform: translate(0px, -45px) rotateX(70deg)
}
.option3{
    transform: translate(0px, -25px) rotateX(60deg)
}
.option2{
    transform: translate(0px, -10px) rotateX(40deg);
}
.option1{
    transform: rotateX(-20deg);
}
.picker-wraper .picker-item {
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}