.scroller-component{display:block;position:relative;height:238px;overflow:hidden;width:100%}.scroller-content{z-index:1}.scroller-content,.scroller-mask{position:absolute;left:0;top:0;width:100%}.scroller-mask{height:100%;margin:0 auto;z-index:3;background-image:-webkit-linear-gradient(top,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),-webkit-linear-gradient(bottom,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));background-image:linear-gradient(180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));background-position:top,bottom;background-size:100% 102px;background-repeat:no-repeat}.scroller-item{text-align:center;font-size:16px;height:34px;line-height:34px;color:#000}.scroller-indicator{width:100%;height:34px;position:absolute;left:0;top:102px;z-index:3;background-image:-webkit-linear-gradient(top,#d0d0d0,#d0d0d0,transparent,transparent),-webkit-linear-gradient(bottom,#d0d0d0,#d0d0d0,transparent,transparent);background-image:linear-gradient(180deg,#d0d0d0,#d0d0d0,transparent,transparent),linear-gradient(0deg,#d0d0d0,#d0d0d0,transparent,transparent);background-position:top,bottom;background-size:100% 1px;background-repeat:no-repeat}.dp-container{bottom:0;z-index:10000;background-color:#fff;display:none}.dp-container,.dp-mask{position:fixed;width:100%;left:0}.dp-mask{height:100%;top:0;opacity:0;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;background-color:#000;z-index:9999}.dp-header{display:-webkit-box;display:-webkit-flex;-webkit-box-align:center;-webkit-align-items:center;background-image:-webkit-linear-gradient(top,#e7e7e7,#e7e7e7,transparent,transparent);background-image:linear-gradient(180deg,#e7e7e7,#e7e7e7,transparent,transparent);background-position:bottom;background-size:100% 1px;background-repeat:no-repeat}.dp-header .dp-item{color:#0ae;font-size:18px;height:44px;line-height:44px;cursor:pointer}.dp-content{display:-webkit-box;display:-webkit-flex;-webkit-box-align:center;-webkit-align-items:center;padding:10px 0}.dp-content .dp-item,.dp-header .dp-item{-webkit-box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1;text-align:center}.scroller-component{display:block;position:relative;height:238px;overflow:hidden;width:100%}.scroller-content{z-index:1}.scroller-content,.scroller-mask{position:absolute;left:0;top:0;width:100%}.scroller-mask{height:100%;margin:0 auto;z-index:3;background-image:-webkit-linear-gradient(top,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),-webkit-linear-gradient(bottom,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));background-image:linear-gradient(180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));background-position:top,bottom;background-size:100% 102px;background-repeat:no-repeat}.scroller-item{text-align:center;font-size:16px;height:34px;line-height:34px;color:#000}.scroller-indicator{width:100%;height:34px;position:absolute;left:0;top:102px;z-index:3;background-image:-webkit-linear-gradient(top,#d0d0d0,#d0d0d0,transparent,transparent),-webkit-linear-gradient(bottom,#d0d0d0,#d0d0d0,transparent,transparent);background-image:linear-gradient(180deg,#d0d0d0,#d0d0d0,transparent,transparent),linear-gradient(0deg,#d0d0d0,#d0d0d0,transparent,transparent);background-position:top,bottom;background-size:100% 1px;background-repeat:no-repeat}